Later-inserted Tags Not Seen By Jquery

Say I have this code in my page:

Solution 1:

The problem is that .click() does only apply a listener for elements that are available in the DOM when the method is executed. You should take a look at .on() instead.

With .on() you can delegate the event, like this for instance:

$("body").on("click", ".test", function() {
   alert('Hello');
});

Now any element (current and future) with the class test available within your body will have a click-event listener.

Solution 2:

live is deprecated as of 1.7, use on

http://api.jquery.com/on/

Solution 3:

try using on() listener:

$(document).on("click",".test", function() {

  alert('Hello');

});

Solution 4:

When you bind events to elements they only bind to those elements that have already been created. So you need to run the 'bind' command again on the new elements.

Alternatively, you can use on('click') which will bind the event to existing and all future elements.

Solution 5:

Because at the time you attach your event handler the object doesnt exist yet. You cant subscribe to elements that dont exist. You can use the Live method for this. http://api.jquery.com/live/

It seems those are deprecated (thanks @Anthony Grist). Use On, or delegate() instead.

http://api.jquery.com/on/

http://api.jquery.com/delegate/

$('div').on('click', function()
{
 //Do something
});