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='but开发者_StackOverflowton' 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 :)

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

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 });

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!");
   });

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.