ajax созданная форма не вызывает вызов ajax

Question

У меня есть список, созданный с использованием цикла while, и когда пользователь нажимает кнопку удаления, ajax используется для удаления записи в базе данных и перерисовывания списка. Все это работает нормально, пока пользователь не попытается удалить другой элемент, кнопка ничего не делает, никаких ошибок, единственный способ заставить его работать - обновить страницу.

Я изменил ajax, так что все, что он возвращает, это кнопка с тем же классом, что и оригинал, чтобы увидеть, могу ли я хотя бы заставить ее вызвать предупреждение, если ничего, кроме nope, ничего.

на основе AJAX

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.trash_btn').click(function(){ 
     alert('bob'); 
    var question = $(this).next('.id_question').val(); 
    var user = '<? echo $id; ?>'; 
    alert(question+' '+user); 
     $.msgbox("Are you sure you want to delete the selected question?", { 
     type: "error", 
     buttons: [ 
      {type: "submit", value: "Yes"}, 
      {type: "cancel", value: "No"} 
     ] 
     }, function(result) { 

     if (result == 'Yes') { 
      $.ajax({ 
       url: 'ajax/opinion_del.php', 
       type:'POST', 
       data: 'question='+ question +'&user='+user, 
       success: function(response){ 
       $('#responses_table').html(response); 
      }, 
     error:function (xhr, ajaxOptions, thrownError){ 
     alert(thrownError); 
     } // End of success function of ajax form 
      }); 
     } 
     }); 
    }); 
    }); 
</script> 

Соответствующая часть таблицы

<td class="details"> 
     <input type="button" name="del_question" value="" class="trash_btn"> 
     <input type="hidden" class="id_question" name="question_id" value="<? echo $row['questionID']; ?>"> 
     <input type="hidden" class="id_user" name="user" value="<? echo $id; ?>" >  
</td> 

АЯКС выход создавая нон кнопку Дрессировка (был первоначально с помощью JSON, но обрезается его для тестирования)

$smeg = '<input type="button" value="test" class="trash_btn">'; 
echo $smeg; 

Answer 1

Я предлагаю изменить привязку события к делегированному обработчику событий, а не стандартную. Что происходит, так это то, что вы правильно привязываетесь к элементу на загрузке страницы, но когда вы обновляете DOM через ваш вызов AJAX, привязка теряется, так как вы удаляете элемент, к которому привязан.

E.g.

$('.trash_btn').click(function(){ 

изменения:

$('#responses_table').on("click", ".trash_btn", function(){ 

Использование делегированного обработчик событий означает, что обработчик события на самом деле связан с #responses_table элемента и когда он стреляет, он проверяет элемент, на который ссылается в event.target, чтобы увидеть, если он соответствует селектор вы передаете в качестве второго аргумента в .on(). Таким образом, ваш обработчик событий работает, даже если вы обманываете DOM и изменяете HTML.

Альтернативой может быть повторное связывание обработчика событий click после вашего обновления DOM с помощью обратного вызова AJAX.