CODEWITHSUNDEEP
jquery
StudioTime
StudioTime

Reputation: 23989

Call a function on an element added to DOM after initial page load

I have a page which in the footer I include jQuery.js and anotherJsFunctionThing.js

Also in the footer to fire the latter I bind it to an element:

function doIt(){
  $('.newElement').anotherJsFunctionThing({...})
}

How can I fire this if the element .newElement is added into the DOM after the page is loaded?

Currently when I call doIt() it fails, because, when jQuery.js and anotherJsFuntionThing.js were loaded, .newElement did not exist

This is what I tried but it failed...

function doIt(){
  $('.newElement').on('create', function(){
    $('.newElement').anotherJsFuntionThing({...})
  });
  $('.newElement').trigger('create');
}

Any better ideas?

Upvotes: 0

Views: 103

Answers (2)

Rick Burns
Rick Burns

Reputation: 1546

This jQuery plugin worked for me to watch for initialized DOM events. https://github.com/AdamPietrasiak/jquery.initialize

Your code would look something like this:

$(".newElement").initialize(function(){
    $(this).anotherJsFunctionThing({...})
});

Upvotes: 0

Deryck
Deryck

Reputation: 7668

Since your current tree won't contain the new element yet, you'll start at the top.

$(document).find(".newElement").anotherThing()

Upvotes: 1

Related Questions