1

我想在拖放项目后重新绑定现有函数，例如：

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

我正在为.droppables .itemon运行一个函数.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);
            }
        });
    });
}

现在，我可以简单地调用这个函数 on.ready()和 for .droppable()event stop。它工作正常，

但我想问一下每次.item丢弃后调用和重新绑定函数是否正确？如果没有，请告诉我如何以正确的方式做到这一点。

4

1 回答 1

3

大多数事情没有“正确”或“错误”的方式，尽管有更有效的方法。您需要的解决方案是委托事件处理，其中事件一旦传播到父元素就会被处理，从而无需为新的子元素重新绑定处理程序。

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

你的处理程序看起来像

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

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

更新

正如我在评论中指出的那样，您的其余代码将不得不针对此更改进行调整，因为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

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

于 2013-07-24T05:57:59.343 回答