Question

我的Jquery one()函数在第二次单击而不是第一次单击后死亡。这是我的HTML

<div class="box">
  <div class="call" data-tai="5">CLICK</div>
</div>

并且继承了我的Jquery

$('body div').one('click', '.call', function() {
  var mother = $(this).parent();
      if(mother.css('position') === 'static') 
           mother.css('position', 'relative');

  var tai = $(this).data('tai');

  $.ajax({
      method: 'GET',
      url: '/bootstrap/call.php',
      data: 'tai='+tai,
      dataType: 'html',
      success: function(ret) {
          mother.append(ret);
      },
  });

  return false;
});

有趣的是，如果我不使用return false;，它会在第一次点击后死亡。但是会出现bubbling，它会在box元素中附加2个html标记而不是1。谢谢你的帮助

Answer 1

$('body div')

将选择两个div并将点击处理程序附加到它们。当您单击嵌套div时，将同时触发两次单击。使用特定的选择器来避免这种情况。

$('.call')

也许可以达到这个目的。

Answer 2

这是因为使用.one绑定的事件处理程序将在jQuery集合中为每个元素触发一次。由于return false会停止事件的传播，因此如果单击.call元素，则不会执行父元素的处理程序，但父元素仍具有活动的单击处理程序。您应该使用更具体的选择器来选择目标元素。如果单击处理程序应绑定到div.call元素：

$('.box div.call').one(...);

现在，如果.box个元素有9个div.call个后代，那么您有9个点击处理程序！点击每个元素后，jQuery取消绑定该特定元素的处理程序。

对于所有元素不是，对于每个元素，。

如果应该为所有匹配元素调用一次处理程序，则可以使用.one方法的委派版本：

$(document).one('click', '.box div.call', function() { // ... });

如果您想委托事件并让处理程序为动态生成的元素运行一次，您可以使用.on方法和:not选择器：

$(document).on('click', '.box .call:not(.clicked)', function() { $(this).addClass('clicked'); // ... });

现在，对于每个.call元素，处理程序被称为一次。由于:not排除了.clicked类的元素，因此选择器与已点击的元素不匹配。

Answer 3

JavaScript中的事件泡沫。你的代码

$('body div').one('click', '.call', function() {
}

连接两者

<div class="box"> <!-- This -->
  <div class="call" data-tai="5">CLICK</div> <!-- And this -->
</div>

您需要一个更具体的选择器。如果这个div是正文中的父元素，如下所示：

<body>
<div class="box">
  <div class="call" data-tai="5">CLICK</div>
</div>
<div class="box">
  <div class="call" data-tai="5">CLICK</div>
</div>
</body>

然后您可以使用这样的选择器：

$('body > div').one('click', '.call', function() {
}

问题是 - 您希望您的点击事件在哪里放置？也许是盒子类的div？

$('div.box').one('click', '.call', function() {
}

这假设.call div正在动态添加到.box div。

P.S。 - 如果你想停止冒泡，我建议你将事件对象传递给你的点击事件并调用stopPropagation（）

$('div.box').one('click', '.call', function(evt) {
  evt.stopPropagation(); // no bubbling
}

Jquery one（）函数在点击时触发两次

3 个答案: