将单击事件绑定到通过 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) {

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

我可以只是确保将特定的id 提供给我加载所有 ajax 数据的父包装器，但这意味着使用一堆相同的代码创建两个单独的绑定事件.

我也可以这样做以覆盖所有基地..

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

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

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

我可以用任何 clean 方法来处理这个问题，还是应该只创建两个不同的绑定事件来处理每种情况？

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
....