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

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

$('[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) {

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

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

任何干净的方式我可以处理这个或我应该创建两个不同的绑定事件来处理每种情况？

解决方法:

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

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

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

使用html()添加动态创建的元素后添加此项.

off(‘click’)将首先取消绑定先前应用的click事件处理程序然后打开(‘click’,将绑定所有匹配选择器的元素上的click处理程序.

编辑

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

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

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

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

$(document).ready(bindEvent);

...

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

标签：jquery,javascript,ajax,event-delegation,jquery-on
来源： https://codeday.me/bug/20190702/1357842.html