Question

I have some elements of the page being injected by a library after the page has been loaded. These elements have onClick actions, which is controlled by jQuery. Since these items are rendered after the page has been loaded, would jQuery have an issue targeting these items to apply the onClick action?

Answer 1

Use the form:

$("#myid").on("click",".myTargetElement", function(){
// do my click stuff here
});

Sample markup:

<div id="myid">
   <div class="myTargetElement">Click Me</div>
   <div class="myTargetElement">Click Me</div>
</div>

NOTE: this form binds to the document not the parent element, forcing document traversal and thus not recommended optimally:

$(".myTargetElement").on("click", function(){
// do my click stuff here
});

Example: clones the first element in the markup above and makes them blue when clicked:

$("#myid").on("click",".myTargetElement", function(){
    $(this).css('color','blue');
});

$('.myTargetElement').eq(0).clone().text("New").appendTo('#myid');