Удалить динамически добавляемые записи (АЯКС)

Question

У меня есть набор записей, которые будут отображаться из базы данных:

<tr> 
    <td>Full Name</td> 
    <td><a class="remove-user" href="/remove-user/6/">remove</a></td> 
</tr> 

я могу удалить их (не динамически) и показать диалог подтверждения, прежде чем делать так:

$('a.remove-user').on('click', function(){ 
    return confirm("Are you sure you want to remove this user?"); 
}); 

Но, когда я добавить динамическую строку с помощью AJAX - я не могу сделать диалог подтверждения, чтобы показать потом:

$('#user_add_final').submit(function(event){ 
    event.preventDefault(); 
    var values = $(this).serialize(); 
     $.ajax({ 
      url: "/ajax/user/", 
      type: "post", 
      data: values, 
      success: function(response){ 
       json = jQuery.parseJSON(response); 
       $('.users tr:last').after("<tr><td>"+json.user.fullname+"</td><td><a class=\"remove-user\" href=\"/action/remove-user/"+json.user.userid+"/\">remove</a></td></tr>"); 
      }, 
      error:function(){ 
       alert(failure); 
      } 
    }); 
}); 

может кто помогите мне заставить это работать?

Answer 1

Поскольку вы не привязаны к событиям щелчка записей, добавленных после факта. Посмотрите на свой обработчик:

$('a.remove-user').on('click', function(){ 
    return confirm("Are you sure you want to remove this user?"); 
}); 

часть, которая идентифицирует элементы:

$('a.remove-user').on(... 

выполняет раз, при загрузке страницы. Таким образом, он может идентифицировать только согласованные элементы, которые существуют , когда страница загружается. Обработчики привязаны к элементам, а не к селекторам. Таким образом, любые элементы, которые не существуют при загрузке страницы, не будут идентифицироваться этим кодом.

Тем не менее, вы можете использовать перегрузку .on(), чтобы прикрепить обработчик к общему неизменному родительскому элементу и фильтровать его из дочерних элементов. Это будет выглядеть следующим образом:

$(document).on('click', 'a.remove-user', function(){ 
    return confirm("Are you sure you want to remove this user?"); 
}); 

Это фактически прикрепляет обработчик document (который не меняется с помощью AJAX) и работает на любой клик в любом месте в документе, но фильтры на втором селекторе каждый раз, чтобы ответить только к элементам, которые соответствуют , что селектор. Таким образом, элементы, добавленные позже в жизни документа, все еще захватываются.

Вам не нужно использовать document, любой общий родительский элемент будет работать. Таблица, содержащая div и т. Д.

Я уже писал об этом here.

Answer 2

Вам необходимо делегировать ваше событие, поскольку новая добавленная строка не присутствовала во время загрузки сценария.

$('.users').on('click', 'a.remove-user', function(){ 
    return confirm("Are you sure you want to remove this user?"); 
}); 

Answer 3

Вы могли бы попробовать что-то вроде:

$('table').on('click', 'a.remove-user', function(){ 
    return confirm("Are you sure you want to remove this user?"); 
}); 

Ussing делегации событий.