Jquery: Selector can't find class?

问题:

I'm trying to advance the Jquery-autcomplete function. I want Jquery-autocomplete to create new rows in a table. That works so far. But I want Jquery to add a delete-button. So the user is able to delete one of his added items.

    $(document).ready(
function() {


//create an new <tr> <td> in #log   
    function log( message ) {
        $("<tr> <td>"  + message + "<input class='Entf' type='button' value ='Entfernen' />" + "</td></tr>").appendTo("#log");
        $( "#log" ).attr( "scrollTop", 0 );}


// get the values from a json-source
        $( "#REMOTE" ).autocomplete({
            source: "json.php",
            minLength: 0,
            select: function( event, ui ) {
                log( ui.item ?
                    ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );}
});


// this is just a test if jquery recognizes the click       
         $('.Entf').click(function(event){
     alert("Thanks for visiting!");
   });
    });

But jQuery doesen't recognize the click of the element it created. To check fpr erros, I placed one row in the html. This button works. But when I add a row via Jquery, the added button deon't work. Here an example from firebug:

<table id="log" border="0" width="400">
<tbody>
<tr>
<td>
test
<input class="Entf" type="button" value="Entfernen">         //this one workes fine. it comes from the original html
</td>
</tr>
<tr>
<td>
daniel aka 121
<input class="Entf" type="button" value="Entfernen">     //this one doesn't work. it's the one that was added by Jquery
</td>
</tr>
</tbody>
</table>

Any ideas?

Thank you! Exuse my english :)

回答1:

use jQuery live():

$('.Entf').live('click',function(event){
     alert("Thanks for visiting!");
   });

using live enables jQuery use callbacks on selectors that are dynamically created by javascript

回答2:

Because the element is getting created after the handlers are bound, it's not registering. You need something like this:

$("body").delegate(".Entf", "click", function() { //function here });

回答3:

Use jQuery on() in jQuery 1.7+

$(document).on("click",".Entf",function(event){
     alert("Thanks for visiting!");
   });

Use jQuery delegate() in jQuery 1.4.3+:

$(document).delegate(".Entf", "click", function(event){
     alert("Thanks for visiting!");
   });

And use jQuery live() in jQuery 1.3:

$('.Entf').live('click',function(event){
     alert("Thanks for visiting!");
   });

回答4:

When you have generated content, you need to bind the button, ie, after you have generated the content, do:

 $('.Entf').click(function(event){
     alert("Thanks for visiting!");
});

again.

Edit: As pointed out by Neal, be careful when doing it this method. The reason as that it will bind to ALL .Entf elements, not just the new ones, causing multiple click events. See http://jsfiddle.net/R9Kb4/2/ for an example of how to create and bind things without having to deal with live() or with multiple binding.