How can I force the DOM to re-eval in Javascript/jQuery?

Question

I am dynamically appending HTML to a webpage and I'm also using jQuery to manage stuff.

When I add HTML code, jQuery ignores its existence.
For example:

$("td.elementToClick").click(...

Will work great with jQuery. But if somewhere in the code I append:

$("tr#myRowToAppend").append("<td class="elementToClick>...</td>");

jQuery will ignore this new element if I click on it.

As jQuery associates the events after the page finishes loading, I need one of two solutions: - Force the DOM to re eval the page without changing the current layout (I don't wish a refresh, so location.reload() is out of the question). - Force jQuery to add this new element to it's internal event manager.

I don't wish to use onclick="blabla()", I really need to use jQuery.

How can I accomplish this?

Answer 1

What you are looking for is jQuery live. From docs description: "Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events."

There is also a plugin liveQuery that supports a wider range of events if you want.

Answer 2

the live() method will alleviate most of your headaches.

I see this happening more often in IE and with cloned elements, to support IE you have to be much more careful with DOM manipulation.

I also see alot of questions on SO with people having issues of copying/moving dom elements to new parts of the dom without cloning it first, which doesn't workout so well in IE.

So you can use live or when you have to handle events from dynamically inserted DOM elements, make sure you clone them with clone(true) to specify you want the events copied:

$("body").append('<div id="one"></div>");

$("#one").mouseover(function(){});

$("body").append( $("#one").clone(true).attr('id','two') );