DOM Not Responding To Jquery Evers After Load Function

I have a simple page that loads content dynamically. I use the jQuery load function to append content to a div. The load function loads content from another file. The problem I a

Solution 1:

When you do something like this:

$("selector").click(function() { ... });

...only elements that are already in the DOM will be matched by the selector and have their click event hooked up; if you add elements later that would have matched the selector, they will not be automatically hooked up after-the-fact.

You can use event delegation to seemingly hook them up automatically using delegate or (with newer versions of jQuery) one of the on variants:

$("container_for_elements").delegate("selector", "click", function() { ... }));
$("container_for_elements").on("click", "selector", function() { ... }));

(Note that the order of arguments is slightly different between the two.)

With event delegation, what really happens is that jQuery hooks click on the container, and when the click bubbles up to the container, it checks the path the event took to see if any of the elements in-between matched the selector. If so, it fires the handler as though you'd hooked it to the element, even though it's actually hooked on the container.

Concrete example:

<div id="container">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
</div>

If we do this:

$("#container").delegate("span", "click", function() {
    console.log($(this).text());
});

...then clicking one of the spans will show its contents, and if we do this:

$("#container").append("<span>Four</span>");

...that span will get handled automatically, because the event handler is on the container and then the selector checked when the event occurs, so it doesn't matter that we added the element later.

Solution 2:

As you can see on jQuery's documentation:

Frequently, when you've added a click (or other event) handler to all links using $('a').click(fn), you'll find that the events no longer work after you've loaded new content into a page using an AJAX request.

When you call $('a'), it returns all the links on the page at the time it was called, and .click(fn) adds your handler to only those elements. When new links are added, they are not affected. See the AJAX and Events Tutorial for a longer discussion.

You have two ways of handling this:

Using event delegation

Event delegation is a technique that exploits event bubbling to capture events on elements anywhere in the DOM.

As of jQuery 1.3, you can use the live and die methods for event delegation with a subset of event types. As of jQuery 1.4, you can use these methods (along with delegate and undelegate starting in 1.4.2) for event delegation with pretty much any event type.

For earlier versions of jQuery, take a look at the Live Query plugin by Brandon Aaron. You may also manually handle event delegation by binding to a common container and listening for events from there. For example:

$('#mydiv').click(function(e){
    if( $(e.target).is('a') )
       fn.call(e.target,e);
});
$('#mydiv').load('my.html');

This example will handle clicks on any element within #mydiv, even if they do not exist yet when the click handler is added.

Using event rebinding

This method requires you to call the bind method on new elements as they are added. For example:

$('a').click(fn);
$('#mydiv').load('my.html',function(){
    $('#mydiv a').click(fn);
});

Solution 3:

Because you are inserting the content AFTER the DOM has been fully loaded, you have to use .on("click",function(){}) to achieve your click functionality because at the time you are binding them they are not available in the DOM !