Jquery: Селектор не может найти класс?

Question

Я пытаюсь улучшить функцию автозаполнения Jquery. Я хочу, чтобы Jquery-autocomplete создавал новые строки в таблице. Это работает до сих пор. Но я хочу, чтобы Jquery добавил кнопку удаления. Таким образом, пользователь может удалить один из своих добавленных элементов.

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

Но jQuery не распознает щелчок созданного им элемента. Чтобы проверить ошибки, я поместил одну строку в HTML. Эта кнопка работает. Но когда я добавляю строку через Jquery, добавленная кнопка не работает. Вот пример из 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>

Есть идеи?

Спасибо! Извините мой английский:)

Answer 1

использовать jQuery live () :

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

Использование live позволяет jQuery использовать обратные вызовы для селекторов, которые динамически создаются javascript

Answer 2

Используйте jQuery on () в jQuery 1.7 +

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

Использовать jQuery делегат () в jQuery 1.4.3 +:

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

И используйте jQuery live () в jQuery 1.3:

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

Answer 3

Поскольку элемент создается после привязки обработчиков, он не регистрируется. Вам нужно что-то вроде этого:

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

Answer 4

Когда вы сгенерировали контент, вам необходимо привязать кнопку, т. Е. После того, как вы сгенерировали контент, снова выполните:

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

.

Редактировать: Как указал Нил, будьте осторожны при выполнении этого метода.Причина в том, что он будет привязан ко ВСЕМ элементам .Entf, а не только к новым, вызывая несколько событий щелчка.См. http://jsfiddle.net/R9Kb4/2/ для примера того, как создавать и связывать вещи без необходимости работать с live () или с множественным связыванием.