Question

我有一个ID为test-container的父div，里面是带有icon-btn类的子div。

当我点击parent-div中的任意位置时，新的child-div元素会附加到click-click的parent-div。

问题是指当我点击child-div元素时，首先触发parent-div事件，然后触发child-div事件。我希望先播放child-div事件。

JS：

$('#test-container').on('click', function(e) {
  alert('clicked');
  var parentOffset = $(this).offset();
  var relX = e.pageY - parentOffset.top;
  var relY = e.pageX - parentOffset.left;
  $(this).append('<div class="icon-btn" style="top: ' + relX + 'px; left: ' + relY + 'px; display: block; position: absolute; border-radius: 3px; border: 1px solid #ffffff; overflow: visible; box-shadow: 0 0 2px #000; z-index: 16; width: 50px; height: 50px; padding: 15px 14px; color: #fff; cursor: pointer;" id="icon-btn-1"></div>')
});;

$(document).ready(function() {
  $(document).on('click', '.icon-btn', function() {
    alert('clicked sub div');
  });
});

HTML：

<div style="width: 300px; position: relative;">
  <img src="http://www.flowermeaning.com/flower-pics/Daffodil-Meaning.jpg" class="img-responsive" width="100%" height="100%">
  <div id="test-container" style="position: absolute; top: 0px; cursor: crosshair; left: 0px; width: 300px; height: 200px; z-index: 8;">
    <div class="icon-btn" style="top: 45px; left: 184px; display: block; position: absolute; border-radius: 3px; border: 1px solid #ffffff; overflow: visible; box-shadow: 0 0 2px #000; z-index: 16; width: 50px; height: 50px; padding: 15px 14px; color: #fff; cursor: pointer;"
id="icon-btn-1"></div>
  </div>
</div>

请参阅JSFiddle了解工作示例。

Answer 1

Document click也适用于该类的动态添加元素。

Element click仅适用于DOM次加载后准备就绪的元素。如果您要使用该选择器添加元素，element click将不适用于它们。

Answer 2

当您将新元素附加到父元素时，附加到该元素的先前事件将不适用于新元素。您可以简单地删除之前的内容并再次附加相同的事件以获得所需的效果

    $('.selectorOfYourDynamicChild').off("click").on('click', function(e) { 
      // Your logic goes here
   })

Answer 3

更改在子div上附加click事件的方式，例如：

`$(document).ready(function() {
  $('.icon-btn').on("click", function() {
    alert("child sub div");
  });
});`

Answer 4

// $（'＃test-container'）。on（'click'，function（e）{ //这都是关于元素

的绑定

    $(document).on('click','#test-container', function(e) {
  alert('parent div');
  var parentOffset = $(this).offset();
  var relX = e.pageY - parentOffset.top;
  var relY = e.pageX - parentOffset.left;
  $(this).append('<div class="icon-btn" style="top: ' + relX + 'px; left: ' + relY + 'px; display: block; position: absolute; border-radius: 3px; border: 1px solid #ffffff; overflow: visible; box-shadow: 0 0 2px #000; z-index: 16; width: 50px; height: 50px; padding: 15px 14px; color: #fff; cursor: pointer;" id="icon-btn-1"></div>')
});;

$(document).ready(function() {
  $(document).on('click', '.icon-btn', function() {
    alert('child sub div');
  });
});

元素单击与文档单击首选项

4 个答案: