jQuery: Event binding on dynamically created elements?

Question

Hi All,

Thanks for reading.

I have a bit of code where I am looping though all the select boxes on a page and binding a .hover event to them to do a bit of twiddling with their width on mouseon/off.

This happens on page ready, and works just fine.

The problem I have is that any select boxes I add via Ajax or DOM after the initial loop won't have the event bound.

I have found this plugin (jQuery Live Query Plugin: http://brandonaaron.net/docs/livequery/#getting-started ), but before I add another 5k to my pages with a plugin, I want to see if anyone knows a way to do this, either with jQuery directly or by another option.

I can provide a code example if anyone needs it...

Thanks!

Edit

Note that jquery now includes the live() method, which replaces part (at the time of writing) of the functionality if the Live Query plugin.

Answer 1

you can add events to objects when you create them. If you are adding the same events to multiple objects at different times, creating a named function might be the way to go.

var mouseOverHandler = function() {
    // do stuff
};
var mouseOutHandler = function () {
    // do stuff
};

$(function() {
    // on the document load, apply to existing elements
    $('select').hover(mouseOverHandler, mouseOutHandler);
});

// this next part would be in the callback from your AJAX call
$("<select></select>")
    .append(/* your <option>s */)
    .hover(mouseOverHandler, mouseOutHandler)
    .appendTo(/* wherever you need the select box */)
;

Answer 2

You could simply wrap your event binding call up into a function and then invoke it twice: once on document ready and once after your event that adds the new DOM elements. If you do that you'll want to avoid binding the same event twice on the existing elements so you'll need either unbind the existing events or (better) only bind to the DOM elements that are newly created. The code would look something like this:

function addCallbacks(eles){
    eles.hover(function(){alert("gotcha!")});
}

$(document).ready(function(){
    addCallbacks($(".myEles"))
});

// ... add elements ...
addCallbacks($(".myNewElements"))

(for some reason, SO seems to be turning my dollar signs into double dollars, but you get the idea).

Answer 3

The JQuery FAQ describes this exact problem and some solutions.

Answer 4

You can also try using live function. http://docs.jquery.com/Events/live

Answer 5

so how do you do event-binding for elements inside a loop? something like this is not working for me..

for (i = 1; i < 5; i++) {

var elem = $('<a id="link' + i + '"><img id="thumb' + i + '" /></a>');

$('#thumb' + i).bind('mouseover',function(event) {
   $('#thumb' + i).addClass('dim');

});

}

it only binds event to element #thumb5, i.e., a non-existent element (since I create only four elements..)

Answer 6

for maya -- for event-binding for elements inside a loop?

for (i = 1; i < 5; i++) { applyClass(i); }

function applyClass(n){ $('#thumb' + n).bind('mouseover',function(event) { $('#thumb' + n).addClass('dim'); }); }

This works for me..........

Answer 7

@maya: create separate function and call that function inside the loop.

for (i = 1; i < 5; i++) { applyClass(i); }

function:

function applyClass(n){ $('#thumb' + n).bind('mouseover',function(event) { $('#thumb' + n).addClass('dim'); }); }

remember that inside the function variable should be different in my case its n