Jquery - (re)wiring Dynamically Generated Elements

Often times I have elements hooked to added functionality, like: $('.myfav').autocomplete(); $('.myfav').datepicker(); $('.myfav').click(somefunction); But when more instances of

Solution 1:

The .live() documentation says ...

.live doesn't support the no-event style callback that liveQuery provides. Only event handlers can be bound with .live.

So I took a look at liveQuery, and I think it will do exactly what you need with something like the following:

$('.myfav').livequery(function() {
  $(this).autocomplete();
  $(this).datepicker();
  $(this).click(somefunction);
});

Seems handy!

Solution 2:

Use live():

$(".myfav").live("click", somefunction);

This will bind that event handler to elements dynamically created after the live() call.

Solution 3:

I think you can use live();, but not how you have written it.

Your current implementation:

$('.myfav').live("click", autocomplete("somefile.php", {max: 15, mustMatch: true}));

This will execute autocomplete immediately, not when jQuery finds a new element with class="myfav"

You should use this syntax:

$('.myfav').live("click", function () {
    $('.myfav').autocomplete("somefile.php", {max: 15, mustMatch: true})
});

You can use all the normal syntax, functions, etc inside the anonymous function.

I think this will work, but I haven't tested it. What it does is send jQuery a function to execute later when the click event fires.

Solution 4:

In cases like this I usually find myself using an init function that does the binding/unbinding, then call that on ajaxComplete or the like. In this case it would probably look like this:

function init()
{
    $('.myfav').unbind('click');
    $('.myfav').autocomplete('disable');
    $('.myfav').datepicker('disable');
    $('.myfav').autocomplete();
    $('.myfav').datepicker();
    $('.myfav').click(somefunction);
}

Of course, depending on the plugin the unbind might look different, I belive jQueryUI uses $('.myfav').draggable('destroy') for instance.