通过AJAX加载的内容如何绑定click事件而不使用委托？

Question

通过AJAX加载的内容如何绑定click事件而不使用委托？

javascriptjqueryajaxevent-delegationjquery-on

4

我有一个情况，我在网站的特定部分中使用名称为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) {

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

编辑：通过jQuery的html方法将HTML数据加载到DOM中。

有没有一种简洁的方式来处理这个问题，或者我应该创建两个不同的绑定事件来处理每种情况？

- Brett

你能添加AJAX代码以及如何在DOM中添加元素吗？ - Tushar

“..但这可能不是一个明智的想法，将元素绑定到文档。” - 为什么？ - raina77ow

@raina77ow https://dev59.com/qWcs5IYBdhLWcg3wdz1m - 我的理解是应该避免这样做。 - Brett

1

我可以确保给父包装器一个特定的id，但这意味着需要进行两个单独的绑定事件...为什么需要两个事件？难道这不行吗：$('<parent_wrapper_selector>').on('click', '[data-command]', function(event) {…}) - gfullam

1

你的情况不是和这个一样吗？当你捕获事件的对象是动态创建/删除的，而你仍然想在它们上面捕获事件，而不必每次创建新对象时都显式重新绑定事件处理程序。 - raina77ow

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tushar · Accepted Answer

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

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

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

在使用 html() 动态创建元素后，请添加以下内容。 off('click') 将首先解除之前应用的单击事件处理程序，然后 on('click', 将在所有匹配选择器的元素上绑定单击处理程序。

编辑这似乎一遍又一遍地重复相同的代码。我不能保持DRY吗？

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

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

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

$(document).ready(bindEvent);

...

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