Ajax returned html doesn't seem to recognize javascript functions that apply to it

Question

I am making ajax requests which return elements in a table. That all works great and it displays properly. However, I notice that any elements that are appended to the table that contain something like so

<div id="myId">Some Text</div>

will not be bound by previous javascript methods that bind to the myId method like so:

$("#myID").click(function() { alert("HI!") };

It works well on anything loaded before ajax is called but if it's html populated by ajax then for some reason those tags don't realize that they should listening for clicks.

Anyone have any insight on this. I'm using JQuery for what it's worth

Answer 1

Use live, like this:

$("#myID").live('click', function() { alert("HI!"); });

live binds the handler for current and future elements; click only does it for current ones.

Answer 2

Your problem comes from the fact that .click() only binds your handler to already existing elements that match the selector. You need to make use of .live() or .delegate(), which will bind your handler to elements that exist now, as well as in the future. For simplicity, let's go with .live():

$("#myID").live("click", function() {
  alert("Hi!"); 
});

"How does it work?" you might ask. Well, .live() actually binds your handler to the specified event to document. It then watches for the specified event as it bubbles up the DOM. When it reaches document, it checks to see where the event originated, if it originated from an element matching your selector, your handler fires.

.delegate() works in much the same fashion, except that it binds the handler to the element you specify to $(), and as a parameter, it takes a selector. It then watches for the event and when it bubbles up to the element specified in $(), it checks to see if the event originated from the element you specified as the first parameter, if it does, your handler fires.

Answer 3

Another way to accomplish this is to change it to

$(document).on('click', '#myID', function() { });