jQuery .on在ajax删除和div刷新后不起作用

Question

On a page with a tab control, each tab contains a table, each tr contains a td with a button which has a value assigned to it.

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

This code below works for the first delete. After the AJAX call & the refresh of the div, no further delete buttons can be clicked. The .on is attached to the document. The same happens if I attach it to the body or anything closer to the buttons.

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;
            }
        });
});

Any ideas? Could it be related to the wildcard for starts with [name^="delete"]? There are no other elements where the name starts with 'delete'.

EDIT

When replacing

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

with

location.reload();

it "works", however that refreshes the whole page, loses the users position and defeats the point of using AJAX.

Answer 1

As the button click is firing at first attempt, there is no issue in that code. All you have to do is, put the button click event in a method and call it after the refresh. This way, the events will be attached to the element again. See the code below,

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

Apologies to all and thanks for your answers. The problem was due to the way the popup was being shown & hidden.

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

and

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

When I changed this line to:

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

it worked. Thanks to LShetty, the alert (in the right place) did help!

Answer 3

If you are using Bootstrap Modal After Ajax Request before Refreshing page add

$('.modal').modal('hide');

This Line will Close your Modal and reload your page. Before that it will complete all Ajax Request things.

But for google chrome there is no issues :) hope this help someone.