在Bootstrap模式中提交按钮不会被点击

I am dynamically loading a table inside my page. Where each row is editable in the Bootstrap modal and each row can be deleted using multiple checked checkboxes via ajax. Submit button inside Bootstrap modal for editing purpose is working fine when the page is loaded for the first time. As soon as the table in the page is loaded via ajax after deletion, the submit button inside bootstrap modal does not respond to anything. Close button will close the Modal.

Not even the textbox is validated if it is left empty. This is a very important step in my project. Please help me to solve this issue. Thanks in advance.

$(document).ready(function() {
    $('.callDelete').click(function() {
        var data = {'ids[]': []};
        $(":checked").each(function() {
            data['ids[]'].push($(this).val());
        });
        var len = data['ids[]'].length;
        if (len === 0)
        {
            $('#myModalDeleteFail').modal('show') // this modal shows an alert message in pop
            setTimeout(function() {
                $('#myModalDeleteFail').modal('hide');
            }, 2500);
        }
        else
        {
            $.ajax({
                url: "deleteAjax.php",
                type: "post",
                data: data,
                success: function(data) {

                    $('.acceptAjaxData').html(data);
                    alert("Deleted Successfully");
                }
            });
        }

    });
 });

I have added the jquery code above which I am using to delete the multiple rows using ajax and from ajax page itself I am loading all the row freshly in the current page. Once all the records are loaded via Ajax then Submit button inside popup for editing is not getting clicked. Please help me to solve this issue. Thank in advance.

The issue seems to be related to the lose of event handlers on the remove , save (submit button) etc, when your table listing gets reloaded from the ajax.

Because , you have registered event handlers like below:

$('.callDelete').click(

The events on the reload listing does get preserved.

Try registering your events like below for all your handlers:

$('.elementClass').on('click', function() { // code
});

And not like:

$('.elementClass').click(function() { // code 
});

Try this

$(function() {
    $('body').on('click', '.callDelete', function() {
        var data = {'ids[]': []};
        $(":checked").each(function() {
            data['ids[]'].push($(this).val());
        });
        var len = data['ids[]'].length;
        if (len === 0)
        {
            $('#myModalDeleteFail').modal('show') // this modal shows an alert message in pop
            setTimeout(function() {
                $('#myModalDeleteFail').modal('hide');
            }, 2500);
        }
        else
        {
            $.ajax({
                url: "deleteAjax.php",
                type: "post",
                data: data,
                success: function(data) {

                    $('.acceptAjaxData').html(data);
                    alert("Deleted Successfully");
                }
            });
        }

    });
 });