jQuery - 在新项目添加到 DOM 后重新绑定(bind)现有函数的正确方法

Question

我想在拖放项目删除后重新绑定(bind)现有函数，例如:

.item 是可拖动项目，.droppable 是可放置区域。

我正在 .ready() 上运行 .droppable 的 .item 函数，但是如果我删除 . item 到 .droppable 那么我现有的函数将不适用于新删除的 .item，所以我将我的事件放在一个函数中，例如:

function my_event(){
    jQuery('.droppable').on('mouseover.mine mouseout.mine', function (e) {
            if ($(this).is(".active")) {
                e.stopPropagation();
                e.preventDefault();
                jQuery(this).toggleClass('highlight');
            }
        }).on('click.mine', function(e){
            if ($(this).is(".active")) {
                e.stopPropagation();
                e.preventDefault();
                show_data(this);
            }
        });
    });
}

现在，我可以简单地在 .ready() 和 .droppable() 事件 stop 上调用此函数。工作正常，

但我想问的是，在每个 .item 删除后调用并重新绑定(bind)该函数是否正确？如果没有，请告诉我如何以正确的方式做到这一点。

Answer 1

虽然有更有效的方法，但做大多数事情没有“正确”或“错误”的方法。您需要的解决方案是委派事件处理，其中事件在传播到父元素后进行处理，从而无需为新的子元素重新绑定(bind)处理程序。

假设所有 .droppable 元素都包含在 .parent 元素中，并且新元素将添加到其中。

你的处理程序看起来像

jQuery('.parent').on('mouseover.mine mouseout.mine', '.droppable', function (e) {
    if ($(this).is(".active")) {
        // etc...
    }
}

jQuery Docs for on 将有助于理解这个逻辑。

更新

正如我在评论中指出的，您的其余代码必须针对此更改进行调整，因为 e.stopPropagation(); 根据定义与委托(delegate)事件的概念不一致。您当前的方法必须重新调整为类似

jQuery('.parent').on('mouseover.mine mouseout.mine', '.droppable', function (e) {

    // get the original child which triggered event
    var activeElem = $(e.target).closest('.droppable');

    if ($(activeElem).is(".active")) {
        e.stopPropagation();
        e.preventDefault();
        jQuery(activeElem).toggleClass('highlight');
    }
}
// etc

如果您从未使用过它们，请阅读 closest和 event.target .