如何在具有多個元素的div上添加on click事件

Question

我有一個通過jQuery ui的draggable動態生成的div，已拖動到sortable的div的結構如下所示：

<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 和追加的另一個 div 如果 div 被點擊或它里面的元素。

到目前為止，我嘗試過的是：

$(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>');
     });
});

演示： 小提琴