Question

我聘请了一位开发人员来帮忙完成一些工作，他主要是以PHP为重点并尝试使用这个javascript。只要将HTML重新加载到DOM中，以下AJAX脚本就会破坏页面。它通过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();
    });
});

Answer 1

您只需执行以下操作：

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

在替换这些元素之前，请调用unblindEvent（）。在替换这些元素之后，请调用bindEvent（）。

AJAX - 只要调用AJAX脚本，Javascript就会破解

1 个答案: