在事件冒泡中选择每个动态内部 div

Question

我有一个像这样的静态 HTML 容器 div：

<div id="dvExchangeNames">
</div>

在document.ready() 事件中，我使用Ajax 调用获取了一些字符串，并将每个字符串作为div 内容附加到容器dvExchangeNames 中。新的 HTML 如下所示：

<div id="dvExchangeNames">

  <div class='drop'> Foo </div>
  <div class='drop'> Bar </div>

</div>

我需要用 drop 类在 div 上绑定 ondrop 事件。所以我使用事件冒泡这样做：

$("#dvExchangeNames").on("dropstart", ".drop", function () {

    $(this).addClass("active");

}).on("drop", function (ev, dd) {

    $(this).toggleClass("dropped");

}).on("dropend", function () {

    $(this).removeClass("active");
});

问题在于它会在 dvExchangeNames 中添加、切换和删除类，但我希望通过 实际触发的子 div dropstart 事件来完成。

显然，$(this) 选择了父 div。我试过$(e.target).addClass()，但没有用。我正在使用 THIS jQuery 插件通过拖放获得多选功能。

Answer 1

因为这是event delegation 又是.on 为drop 和dropend 显然目标#dvExchangeNames 正如你提到的。因此，将所有events 设为event delegation，如下所示：

$("#dvExchangeNames").on("dropstart", ".drop", function () {
    $(this).addClass("active");
}).on("drop",".drop", function (ev, dd) {
    //event delegation here
    $(this).toggleClass("dropped");
}).on("dropend",".drop", function () {
    //event delegation here too
    $(this).removeClass("active");
});