Question

我希望在删除draggbale项后重新绑定现有函数，例如：

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

我正在.droppable上为.item .ready()运行一个函数，但是如果我将.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次丢弃后调用和重新绑定函数是否正确？如果没有，那么请告诉我如何以适当的方式做到这一点。

Answer 1

尽管有更有效的方法，但没有“正确”或“错误”的方法来做大多数事情。您需要的解决方案是委托事件处理，事件在传播到父元素后处理，从而无需重新绑定新子元素的处理程序。

假设您的所有.droppable元素都包含在.parent元素中，并且会在那里添加新元素。

您的处理程序看起来像

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

on的{{3}}将有助于理解这种逻辑。

更新

正如我在评论中所述，其余代码必须针对此更改进行调整，因为根据定义，e.stopPropagation();与委派事件的概念不一致。你当前的方法必须重新加入像

这样的东西

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

如果您从未使用过它们，请阅读jQuery Docs和closest。

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

1 个答案:

更新