jQuery on() не срабатывает при добавлении тега

Question

У меня такое чувство, что это непростая ошибка, которую я делаю, но я просто не могу ее увидеть в данный момент.

У меня есть таблица, в которую я динамически добавляю строки - последний столбец каждой строки содержит ссылку, которая при щелчке должна удалять эту строку. На данный момент строки добавляются отлично, но я не могу понять, почему событие, прикрепленное к кнопкам удаления, не срабатывает. Я удалил код для проверки с помощью console.log(), но я ничего не вижу в консоли.

Я знаю, что on() должен работать с добавленным HTML, чего мне не хватает?

http://jsfiddle.net/52Pbk/

HTML:

<div id="people"> 
      <table> 
       <tr> 
        <th>First Name</th> 
        <th>Second Name</th> 
        <th>Age</th> 
       </tr> 
      </table> 
     </div> 
    <a href="#" id="add">Add</a> 

JS:

var html = '<tr>'; 
      html += '<td><input type="text" /></td>'; 
      html += '<td><input type="text" /></td>'; 
      html += '<td><input type="text" /></td>'; 
      html += '<td><a href="#" class="remove_btn">x</a></td>'; 
     html += '</tr>'; 

$('.remove_btn').on('click', function() { 
     console.log('REMOVE BUTTON CLICKED');    
    //$(this).parent().parent().remove(); 
       return false; 
      }); 

$('#add').on('click', function() { 
    $('#people').append(html); 
    return false; 
}); 

Answer 1

Вы связывание обработчика событий click для всех существующих элементов DOM. Вы должны использовать этот синтаксис .on() для делегирования событий для будущих динамически создаваемых элементов.

$("#people").on("click", ".remove_btn", function(e) { 
    console.log('REMOVE BUTTON CLICKED');   
    e.preventDefault(); 
    return false; 
}); 

Вы должны использовать .on() в родительском элементе, который не изменяется. В этом случае я использовал #people. Но вы также можете сузить его, используя более близкий родительский элемент.

Answer 2

Это просто вопрос порядка. Вам нужно добавить HTML-код, прежде чем вы вызываете код для регистрации события onclick.

$('#add').on('click', function() { 
    $('#people').append(html); 

    $('.remove_btn').on('click', function() { 
      console.log('REMOVE BUTTON CLICKED');    
       //$(this).parent().parent().remove(); 
         return false; 
       }); 


    return false; 
}); 

Answer 3

Это происходит, когда вы применяете событие на элемах, которые недоступны в dom. Таким образом, вы должны передать событие своему ближайшему существующему родителю:

$('table#people').on('click', '.remove_btn',function() {