jQuery .on не работает после ajax delete и div refresh

Question

На странице с элементом управления вкладкой каждая вкладка содержит таблицу, каждый tr содержит td с кнопкой, которая имеет назначенное ей значение.

<td> 
<button type="button" class="btn" name="deleteEventBtn" value="1">Delete</button> 
</td> 

Этот код ниже работает для первого удаления. После вызова AJAX & обновление div, никакие дополнительные кнопки удаления не могут быть нажаты. Файл .on прикреплен к документу. То же самое происходит, если я прикреплю его к телу или чем-нибудь ближе к кнопкам.

function deleteRecord(url, id, container) { 
    $.ajax({ 
     type: "POST", 
     url: url, 
     data: { id: id }, 
     success: function (data) {   
      $('#delete-popup').hide(); 
      $(container).trigger('refresh'); 
     } 
    }); 
} 

$(document).ready(function() { 
     $(document).on('click', '[name^="delete"]', function (e) { 
      e.preventDefault(); 
      var id = $(this).val(); 
      $('#current-record-id').val(id); 
      $('#delete-popup').modal('show'); 
     }); 

     $('#delete-btn-yes').on('click', function (e) { 
      e.preventDefault();   
      var recordId = $('#current-record-id').val(); 
      var recordType = location.hash; 
      switch (recordType) { 
       case "#personList": 
        deleteRecord(url, recordId, recordType); 
      break; 
      } 
     }); 
}); 

Любые идеи? Может ли это быть связано с подстановочным знаком для начала с [name^= "delete"]? Нет других элементов, где имя начинается с «delete».

EDIT

При замене

$(container).trigger('refresh'); 

с

location.reload(); 

это "работает", однако, что обновляет всю страницу, теряет позиции пользователей и побеждает точку использования AJAX.

Answer 1

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

function deleteRecord(url, id, container) { 
    $.ajax({ 
     type: "POST", 
     url: url, 
     data: { id: id }, 
     success: function (data) {   
      $('#delete-popup').hide(); 
      $(container).trigger('refresh'); 
      BindEvents(); 
     } 
    }); 
} 

$(document).ready(function() { 
     BindEvents(); 
}); 

function BindEvents() 
{ 
    $(document).on('click', '[name^="delete"]', function (e) { 
      e.preventDefault(); 
      var id = $(this).val(); 
      $('#current-record-id').val(id); 
      $('#delete-popup').modal('show'); 
     }); 

     $('#delete-btn-yes').on('click', function (e) { 
      e.preventDefault();   
      var recordId = $('#current-record-id').val(); 
      var recordType = location.hash; 
      switch (recordType) { 
       case "#personList": 
        deleteRecord(url, recordId, recordType); 
      break; 
     }); 
    } 

Answer 2

Извините за все и спасибо за ответы. Проблема была связана с тем, как всплывающее окно показывалось &.

$('#delete-popup').modal('show'); 

и

$('#delete-popup').hide(); 

Когда я изменил эту строку:

$('#delete-popup').modal('hide'); 

он работал. Благодаря LShetty предупреждение (в нужном месте) помогло!