Ajax成功POST请求后仅生效一次的问题排查与修复

问题根源在于：你直接给.cBox元素绑定点击事件，这种方式只能对页面初始加载时已存在的.cBox生效。当通过$(".tasks-list").load()重新加载任务列表后，新生成的.cBox元素并没有被绑定点击事件，所以后续点击无法触发AJAX请求。

修复方法是使用事件委托，把事件绑定到一个始终存在的父级元素（比如document或.tasks-list的外层稳定容器），利用事件冒泡机制来处理动态生成元素的事件。

修改后的核心代码如下：

// 替换原来的$('.cBox').on('click', function(){...})
$(document).on('click', '.cBox', function(){
    let id_task = $(this).attr('id')
    const data = {
        "id": id_task,
    }
    $.ajax({
        url: "",
        type: "POST",
        dataType: "json",
        data: JSON.stringify({"payload":data}),
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": getCookie('csrftoken')
        },
        cache: false,
        success: (data) => {
            if (data.status == 1) {
                $(".tasks-list").load(window.location.pathname + " .tasks-list")
            }
        }
    })
});

说明 #

事件委托的原理是：将事件绑定到一个不会被替换的父元素（这里用document是最稳妥的选择，因为它始终存在），当点击.cBox时，事件会向上冒泡到document，此时jQuery会检查触发事件的元素是否匹配.cBox选择器，如果匹配就执行对应的回调函数。这样不管.cBox是页面初始就有的，还是后续动态加载生成的，都能正常触发点击事件。

内容的提问来源于stack exchange，提问作者SM1L3_B0T