将点击事件绑定到通过 AJAX 加载的内容而不进行委托？

Question

我有这样一种情况，我在网站的特定部分的许多实例中使用名为 data-command 的 data 属性，而不是绑定大量单独的点击事件，我决定只使用一个并使用一个开关，例如：

$('[data-command]').on('click', function(event) {

    // Prevent default click action
    event.preventDefault();

    // Get command
    var command = $(event.target).data('command');

    switch (command) {
        // Do stuff...
    }

    // Prevent default click action (IE 8)
    return false;

});

然而，当试图让它处理通过 AJAX 加载的数据时，它刚刚成为一个问题。

这显然有效..

$('#existing_element').on('click', '[data-command]', function(event) {

...但由于它应该在网站该部分的许多不同页面上工作，因此上述内容不适用于所有页面。

我可以只是确保为我加载所有 ajax 数据的父包装器提供特定的 id ，但这意味着两个具有相同代码的独立绑定事件。

我也可以这样做以涵盖所有基础..

$(document).on('click', '[data-command]', function(event) {

...但是将元素绑定到文档可能不是一个明智的想法。

编辑： Html 数据正在通过 jQuery 的 html 方法加载到 DOM。

有什么干净的方法可以处理这个问题，还是我应该创建两个不同的绑定事件来处理每种情况？

Answer 1

事件委托是在动态创建的元素上绑定事件的最佳方法。由于您不想使用事件委托，请使用以下方法绑定事件。

$('[data-command]').off('click').on('click', clickHandler);

// Somewhere in the same scope
function clickHandler(e) {
    // Handle click event here
}

在使用 html() 添加动态创建的元素后添加此内容。

off('click') 将首先取消绑定之前应用的点击事件处理程序，然后 on('click', 将绑定所有匹配选择器的元素上的点击处理程序。

编辑

这似乎是一次又一次地重复相同的代码。我不能保持干燥吗？

是的，您可以通过创建一个函数来绑定事件并在您想要绑定事件时调用相同的函数来保持代码干爽和干净。

function clickHandler(e) {
    // Handle click event here
}

function bindEvent() {
    $('[data-command]').off('click').on('click', clickHandler);
}

$(document).ready(bindEvent);

...

$.ajax({
    ...
    success: bindEvent
....

将点击事件绑定到通过 AJAX 加载的内容而不进行委托？

Binding a click event to content loaded via AJAX without making it delegated?

javascript

ajax

jquery

event-delegation

jquery-on