jQuery one（）函数在单击时触发两次

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() {
}

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

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

假设.call div是动态添加到.box div中的。

PS-如果您想停止冒泡，建议您将事件对象传递给click事件并调用stopPropagation（）

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

jQuery one（）函数在单击时触发两次

问题描述

3 个解决方案

解决方案1
2 2016-06-07 13:04:24

解决方案2
1 2016-06-07 13:09:15

解决方案3
0 2016-06-07 13:35:09

jQuery one（）函数在单击时触发两次

问题描述

3 个解决方案

解决方案1 2 2016-06-07 13:04:24

解决方案2 1 2016-06-07 13:09:15

解决方案3 0 2016-06-07 13:35:09

解决方案1
2 2016-06-07 13:04:24

解决方案2
1 2016-06-07 13:09:15

解决方案3
0 2016-06-07 13:35:09