Question

I have a few DOM Components on which I bind events like click,hover, etc….
Because I use JSF with AJAX, sometimes these components get re-rendered and then I have to rebind the DOM events to them.

To achieve the automatic re-binding of newly rendered components I register with JSF event to rebind in this manner:

jsf.ajax.addOnEvent(function (data) {
    if (data.status === "success") {
        $("#someid").click(function() {...});
    }
});

Problem with this solution is that when the components are not re-rendered but an AJAX event occurs, the binding is doubled and tripled and so on.

A solution that pop up to my head is to have a flag for each DOM component that is set to true when the component was bound to an event.
It will work but is a little cumbersome.

I’m wondering if there is a better solution that I don’t know of (or can’t think of), like some kind of jQuery feature that allows the programmer to avoid more than one binding per event per DOM component.

Thanks!

Answer 1

this is exactly what jQuery.live() is for.

EDIT: As noted in the comments, as of jQuery 1.7, the correct method to use is jQuery.on()