元素点击与文档点击偏好答案

【问题标题】：Element click vs Document click preference元素点击与文档点击偏好
【发布时间】：2017-04-20 06:49:57
【问题描述】：

我有一个 id 为 test-container 的父 div，其中包含类为 icon-btn 的子 div。

当我单击 parent-div 中的任意位置时，一个新的 child-div 元素将附加到单击位置的 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。

【问题讨论】：

试试这个：$(document).on('click','#test-container', function(e) { instance of $('#test-container').on('click '，函数（e）{jsfiddle.net/x95owvL8/8
@kag 是的，这行得通。将其发布为答案。

标签： javascript jquery

【解决方案1】：

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

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

【讨论】：

我明白这一点。但我想要的是document click 应该在element click 之前触发。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：