$(document).on 的 jquery 问题丢弃变量答案

【问题标题】：jquery issue with $(document).on drops variables$(document).on 的 jquery 问题丢弃变量
【发布时间】：2018-04-08 16:03:03
【问题描述】：

我有这段代码，没有（doc on）它可以工作，告诉 div 在重新加载后重新加载按钮不起作用。随着（doc on）事件触发但丢弃变量任何想法？

 $(document).on(".status").click(function (event) {
    event.preventDefault();
    var ids = $(this).attr("data-id-status");
    var status = $(this).attr("data-status");
    var record = this;
    $(record).attr('class', 'btn btn-danger big-bnt prams');
    $(record).prop('disabled', true);
    $(record).html('Precessing');
    $.ajax({
        url: 'ajax.php',
        type: 'post',
        data: {action: 'status', id: ids, status: status},
        success: function (data, status) {
            alert(data);
            if (data == '0') {
                $('#flag-view').fadeOut(800, function () {
                    $("#r" + ids).remove();
                    $('#flag-view').fadeIn().delay(2000);
                });
            }
            else if (data == '2') {

            }
            else if (data == '3') {

            }
        },
        error: function (xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        }
    }); // end ajax call
})

【问题讨论】：

你的意思是“他事件触发但丢弃变量”你能解释一下吗？
点击运行的 jquery 事件能够添加警报并显示在屏幕上
事件委托，只是说。当您使用 Ajax 替换内容时，您将丢失直接在这些元素上设置的任何绑定。发布的答案是将事件绑定到文档上，并将click 委托给您的元素（基本上，没有解释冒泡）。因此，当文档中发生单击时，它会搜索您的元素。而不是直接绑定。

标签： javascript php jquery document

【解决方案1】：

您的声明不正确更改

来自

$(document).on(".status").click(function (event) {

到

$(document).on("click", ".status", function(event){
});

【讨论】：

【解决方案2】：

.on() 不是这样工作的。

.on() 是一个辅助函数，用于将事件处理程序添加到元素（带有可选选择器），如下所示：

$(document).on("click", ".status", function (event) {
    // Do your stuff here
});

这样做（提供选择器）使其成为委托处理程序。 document 中只添加了一个事件处理程序，任何冒泡的事件都将被捕获并提供给回调函数。

您还可以将事件处理程序直接添加到元素（或元素集合），如下所示：

$(document).find(".status").on("click", function (event) {
    // ...
});

如果添加了处理程序的.status 元素被删除，那么处理程序也将被删除。

jQuery 中的事件处理起初可能有点令人困惑，但它是非常合乎逻辑的。我建议您read up on it 以更好地了解它的工作原理。

【讨论】：