javascript - 如何在包含多个元素的 div 上添加点击事件

Question

我有一个 div 是通过 div 的结构动态生成draggable的jQuery ui，它被拖到 divsortable是这样的：

<div class="some-div" >
    <label class="label"> Label caption: </label>
    <input id="checkbox" type="checkbox" class="checkbox"/>
    <input id="checkbox" type="checkbox" class="checkbox"/>
    <input id="checkbox" type="checkbox" class="checkbox"/>
</div>

如果单击其中的或元素，我想将事件放在div 并附加另一个。divdiv

到目前为止我尝试的是：

$(function() {
     $(document).on('click', '.some-div', function( e ) {
          e.preventDefault();
          $(e.target).append('another-div');
     });
});

但上面的代码也将 附加another div到div.

我该如何解决这个问题？

Answer 1

this事件处理程序内部将引用单击的some-div元素。e.target将引用点击发起的元素，它可能是标签或输入元素。

$(function() {
     $(document).on('click', '.some-div', function( e ) {
          e.preventDefault();
          $(this).append('<div>another-div</div>');
     });
});

演示：小提琴