如何向 jQuery 的 on() 回调添加事件？答案

【问题标题】：How to add an event to jQuery's on() callback?如何向 jQuery 的 on() 回调添加事件？
【发布时间】：2015-03-16 13:48:25
【问题描述】：

我试过了：

$('body').on('click', '.headerCheckbox', function (event) { // Add event here and magic should happen?
    event.stopPropagation(); // event output in firebug: event: [object Object]
    headerCheckboxClicked($(this));
});

这是一个表格，其中一列的标题中有一个复选框。我想停止事件冒泡，这样表就不会得到事件，所以它不会对列进行排序。

我认为这是正确的方法，但在我添加该行后表格仍然排序。我在jQuery Documentation 中找不到一个很好的例子。

替代解决方案我在指定列上禁用排序的数据表方式。

    table3 = $("#tableComputerPackages").DataTable({
        "order": [[1, "desc"]],
        "columnDefs":
        [
            {
                "targets": 0,
                "orderable": false
            }
        ]
    });

A.沃尔夫想到了这个问题的答案。这是因为我用 3 参数版本而不是我习惯的 2 编写了 on()，所以我什至没有考虑它。

【问题讨论】：

那么事件是如何附加到表格的？
表格来自datatable.net。他们有自己的活动。我没有做任何事情，如果这就是你的意思。我以为我可以将事件添加到function(event)..
这是由于委托的工作方式。在这里，您的点击事件已经通过 DOM 冒泡到正文级别。最简单的解决方案是使用内联属性附加 onclick 事件，例如，请参阅stackoverflow.com/a/28571944/1414562 现在，我不是数据表专家，但我想您可以使用更相关的方法对其进行过滤，如果目标事件是复选框，则避免排序。也许提供更多信息，如您如何初始化有问题的数据表本身。无论如何，添加有问题的数据表标签，这样专家就可以更容易地看到它并可能给出答案。
啊当然。这是因为冒泡已经达到了身体。有道理。
也就是说，如果您的数据表标题是静态的，您应该能够直接将事件绑定到复选框：$('.headerCheckbox').on('click', function (event) {event.stopPropagation(); //...});

标签： javascript jquery events event-handling datatables

【解决方案1】：

如果您的数据表标题是静态的，您应该能够直接将事件绑定到复选框：

$('.headerCheckbox').on('click', function (event) {
      event.stopPropagation(); 
      headerCheckboxClicked($(this));
});

您的问题是关于委派如何工作，使用事件冒泡（并使用事件目标将其过滤掉），所以实际上您在body 级别停止传播，标题点击事件已经触发，因此排序方法已经调用。

【讨论】：