AJAX-每当调用AJAX脚本时,Javascript就会崩溃


AJAX - Javascript is breaking whenever the AJAX script is called

我雇佣了一位开发人员来帮助完成一些工作,他主要关注PHP,并尝试使用此javascript。以下AJAX脚本在将HTML重新加载到DOM中时会中断页面。它通过Codenigniter调用了一个函数来重新加载页面中的view。一旦发生这种情况,所有的javascript都将不再工作。

我似乎找不到有助于解决这个问题的解决方案。请帮忙。

注意:理想情况下,我宁愿代码只加载数据,而不刷新HTML,但现在需要这样做,因为我要面对时间线

代码:

$(document).ready(function () {
    // Ajax Form Submit
    $('body').on('click', '.submitForm', function () {
        var formid = $(this).parents('form').attr('id');
        var validationResult = $('#' + formid).validationEngine('validate');
        if (!validationResult) {
            return false;
        }
        var url = $('#' + formid).attr('action');
        var formdata = $('#' + formid).serialize();
        if ($('#' + formid).find('.submitForm').hasClass('loading')) {
            $(this).hide();
            $('#' + formid).find('.loader').show();
        }
        $.ajax({
            type: "POST",
            cache: false,
            url: url,
            data: formdata,
            dataType: 'json',
            success: function (data) {
                if ($('#' + formid).find('.submitForm').hasClass('loading')) {
                    $('#' + formid).find('.submitForm').css('display', 'inline');
                    $('#' + formid).find('.loader').hide();
                }
                if (data.type == 'add') {
                    if (data.html) {
                        var newhtml = "<tr>" + data.html + "</tr>";
                        $('.tab-pane.active table').append(newhtml);
                    }
                    $('#' + formid).find('.message').html(data.msg).show();
                    $('#' + formid).trigger('reset');
                    setInterval(function () {
                        $('#' + formid).find('.message').hide();
                    }, 5000);
                } else {
                    if (data.error) {
                        $('#' + formid + ' .message').show().html(data.error);
                    } else {
                        $('#' + formid + ' .message').show().html(data.msg);
                        if (data.reload_loc) {
                            window.setTimeout(function () {
                                window.location.href = data.reload_loc;
                            }, 4 * 1000);
                        }
                    }
                }
            }
        });
    });

    // Generic Save Form Data
    $('body').on('click', '#saveFormdata', function () {
        var formid = $(this).parents('form').attr('id');
        var validationResult = $('#' + formid).validationEngine('validate');
        if (!validationResult) {
            return false;
        }
        $('#' + formid).submit();
    });
});

您只需执行以下操作:

function bindEvent()
{
    $('body').on('click', '.submitForm', function () { //Your code });
    $('body').on('click', '#saveFormdata', function () { //Your code});
}
function unblindEvent()
{
    $('body').off('click', '.submitForm'); //Something like this, please read Jquery.off 
    $('body').off('click', '#saveFormdata');
}

在替换这些元素之前,请调用unbindEvent()。替换这些元素后,调用bindEvent()。