jQuery与动态生成的元素

Question

I've been working with jQuery for a pair of weeks and I've noticed it works fine with objects that are in the original HTML document, but when I generate a new element using jQuery the library doesn't get any of its events.

Let's say I try to run something like this:

$('.whatever').click(function() {
  alert("ALERT!");
});

If the HTML does have something like this:

<span class="whatever">Whatever</span>

Then clicking on the word Whatever gets me a nice alert.

But if the span element is added dynamically using jQuery, nothing happens when clicking on it.

Is there a way to make jQuery work with those elements, somehow?

Answer 1

Thats because the : _(corrected)

$('.whatever').click(function() {
  alert("ALERT!");
});   

Means, in literal terms:

Find all elements currently on the page that have the class ".whatever"
Foreach element in that result set, bind this function to its click event

so naturally, adding a new DOM element wont automagically apply the click.

the best way to solve this is create bindings during your insert phase, ie:

  var x = document.createElement("span"); 
  $(x).click(function(){ });  //etc 
  $(somcontiner).append(x); 

Warning on simply rebinding everything

If done wrong, it can lead to undesired effects, ie, making the number of times the event triggers something increase. To stop this, you may need to first unbind them to delete the previous passes binds.

ie,

$(x).click(foo); 
$(x).click(bar);  //foo and bar should both execute. 

so to stop this, you need

$(x).unbind("click");
$(x).click(foo); 

in the rebind.

Answer 2

If you have jQuery 1.3 or later, try using live for adding events to dynamically generated elements:

$('.whatever').live("click", function() {
  alert("ALERT!");
});

Answer 3

Thanks everybody.

Somehow I thought elements were added to the DOM automatically by jQuery just by adding them anywhere.

I've also found some extra information on the topic:

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

http://learningjquery.com/2008/03/working-with-events-part-1

http://learningjquery.com/2008/05/working-with-events-part-2

Just in case somebody else needs it.

Answer 4

You need to rebind it.

function bindme(){
    $('.whatever').click(function(){
        alert('binded');
    });
};

bindme();

//function that will generate something

function foo(){
   $('.whatever').val('oryt');
   bindme();//rebind itagain
}

Answer 5

另请参阅reglib ，这是一个类似的库，允许您正在寻找的编程风格。

Answer 6

此外，还有一个非常出色的jQuery插件可以解决这个问题，称为livequery