AJAX执行后如何刷新jQuery的DOM作用域？

问题描述 #

我有一个日历系统，每个日期都带有唯一ID。页面首次加载时无AJAX，展示当前日历日期；用户可通过按钮触发AJAX加载前后月份。点击日历日期可将日期值添加至独立<form>元素，并将日期框转为关联表单的文本输入。所有功能基于jQuery 1.12的$(document).ready()运行。但通过AJAX重载日历后，原有jQuery代码无法识别新加载的日期ID，我尝试在AJAX调用后刷新整个$(document).ready()内的代码但未成功。

相关代码如下：

$(document).ready(function() {

    /* Clear input box and also clear marked calendar dates*/
    $('#clearFrom').on('click', function() { 
        var valueA = $('#coreDateA').val();
        $('div').find("[data-core='" + valueA + "']").removeClass( "dateChoice" ); /* Clear marked calendar date */
        $('#bookDatesa').val("");
        $('#coreDateA').val("");

        var valueBnum = parseInt($('#coreDateB').val());

        /* Clear each marked calendar date */
        $("[data-core]").each(function(){ 
            var timestamp=parseInt($(this).attr("data-core")); 
            if(timestamp != valueBnum) {
                $(this).removeClass("dateChoice"); 
            }
        });
    });

    ... more similar actions here ... 

    $('td > div').on('click', function() { /* Calendar table td "button" */

       $('#mailbox').show(360);

       $(this).toggleClass( "dateChoice" );
       var dateValueOutput = $(this).attr('data-value');
       var dataCore =  parseInt($(this).attr('data-core')); /* Value from calendar table */
       var checkDataA = parseInt($('#coreDateA').val());
       if (isNaN(checkDataA)) {
           checkDataA = 0;
           $('#coreDateA').val("");
       }
       ...
       ....
       /* Yet more similar code here */
       ....
       ...
    });


   ....

   /* AJAX calendar loader */

    $(document).on('click','table.picker a',function (e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: "/calendarURL",
            data: "date="+ dataValues,
            dataType: 'text',
            success: function (response) {
                $('#calendarZone').html(response);
                /** Something in here to reload the "document ready" JQuery */ 
            }
        });
    });


});

解决方案 #

1. 事件委托方案完全适用 #

你提到的事件委托方案正是解决这类动态DOM事件绑定问题的标准方案，完全适配你的场景。

原因在于：初始的$('td > div').on('click', ...)是直接把事件绑定在页面加载时已存在的DOM元素上，AJAX新加载的日期元素属于后续动态生成的，不会自动继承这些事件绑定。而事件委托是将事件绑定在始终存在的父级元素（比如#calendarZone或document）上，利用事件冒泡机制，当点击动态生成的日期元素时，事件会冒泡到父级，由父级统一处理，这样不管DOM怎么更新，新元素的事件都能被捕获。

具体修改方法：将原来的日期点击事件绑定代码修改为事件委托形式：

// 推荐绑定到固定存在的#calendarZone，比document更高效
$('#calendarZone').on('click', 'td > div', function() {
    // 原有的点击逻辑代码不变
    $('#mailbox').show(360);
    $(this).toggleClass( "dateChoice" );
    var dateValueOutput = $(this).attr('data-value');
    var dataCore =  parseInt($(this).attr('data-core'));
    var checkDataA = parseInt($('#coreDateA').val());
    if (isNaN(checkDataA)) {
        checkDataA = 0;
        $('#coreDateA').val("");
    }
    // ... 剩余逻辑代码
});

2. 其他可行方法 #

除了事件委托，还有两种常见的处理方式：

（1）封装事件绑定函数，AJAX成功后重新绑定

将日期点击的事件绑定逻辑封装成独立函数，在页面初始化和AJAX重载后分别调用：

$(document).ready(function() {
    // 封装绑定函数
    function bindCalendarDateEvents() {
        // 先移除已有绑定，避免重复绑定触发多次
        $('td > div').off('click').on('click', function() {
            // 原点击逻辑代码
        });
    }

    // 初始化绑定
    bindCalendarDateEvents();

    // AJAX加载逻辑
    $(document).on('click','table.picker a',function (e) {
        e.preventDefault();
        $.ajax({
            type: "GET",
            url: "/calendarURL",
            data: "date="+ dataValues,
            dataType: 'text',
            success: function (response) {
                $('#calendarZone').html(response);
                // AJAX成功后重新绑定事件
                bindCalendarDateEvents();
            }
        });
    });
});

注意必须先调用.off('click')清除原有绑定，否则多次AJAX后会导致同一事件被触发多次。

（2）在动态HTML中内嵌事件处理（不推荐）

在AJAX返回的日历HTML中，直接给每个日期div添加onclick属性，调用全局定义的处理函数：

<!-- AJAX返回的日期元素示例 -->
<td><div data-core="1620000000" data-value="2021-05-03" onclick="handleDateClick(this)">03</div></td>

然后在全局作用域定义处理函数：

function handleDateClick(el) {
    // 原点击逻辑代码，用el代替$(this)
    $(el).toggleClass("dateChoice");
    // ... 剩余逻辑
}

这种方法违反了行为与结构分离的前端开发原则，不利于代码维护，仅作为备选方案。

总结 #

优先选择事件委托方案，它无需手动管理事件的重新绑定，代码简洁且性能更优，完全适配你的AJAX日历场景。

内容的提问来源于stack exchange，提问作者Mm-Art-In