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.