jQuery Applying Action To Element Being Injected

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

This is a typical case for using delegated events where you bind the handler to the parent element with a specific selector passed as an argument and jQuery will trigger the handler only when the matching selector is the one triggering the event.

Read more on jQuery documentation under Direct and delegated events -> http://api.jquery.com/on/

.on( events [, selector] [, data], handler(eventObject) )

events - One or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

selector A selector string to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.

data Data to be passed to the handler in event.data when an event is triggered.

handler(eventObject) A function to execute when the event is triggered. The value false is also allowed as a shorthand for a function that simply does return false.

The above is to target the dynamic elements that could be added later to DOM.

Note:

1. Incase of delegated events, You should always bind it to closest static container that would be available when you bind the handler. More info: Should all jquery events be bound to $(document)?

2. However, it is always better to bind directly to the elements which can be achieved by binding the handler after the elements are inserted to DOM.

Answer 2

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');