文章/答案/技术大牛

发布

问jQuery事件多次触发
EN

Stack Overflow用户

提问于 2022-04-23 16:25:59

回答 2查看 68关注 0票数 2

我克隆了含有按钮的div，这些按钮可以克隆他们的父母。在尝试单击按钮时，事件会触发2n次数，因此单击第二个克隆会生成4个其他克隆，等等：

$(".add").off("click").on("click", function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();
  $(".cloneable").clone(true).appendTo(".container");
});

$(".rem").off("click").on("click", function() {
  if (document.getElementsByClassName('container')[0].childElementCount > 1) {
    $(".cloneable:last").remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cloneable">
    <div>
      <a class="btn btn-primary add" role="button">Add cell</a>
      <a class="btn btn-primary rem" role="button">Remove cell</a>
    </div>
    <iframe src="index.php"></iframe>
  </div>
</div>

我做错什么了？

jquery

dom-events

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-04-23 16:36:05

几件事。

使用延迟单击处理程序更容易。
--您正在克隆所有的“克隆性”，而不仅仅是first。original.
Remove将找到所有的cloneable并克隆它们，而不仅仅是您的cloneable现在删除您单击的那个，而不是最后一个。
disabled类将被添加/移除到rem按钮中，这取决于是否只剩下一个。

$(".container").on("click", ".add", function(e) 
{
  e.stopPropagation();
  e.stopImmediatePropagation();
  $(".container .rem").removeClass("disabled");
  
  let $cloneable = $(".cloneable").first().clone(true);
  $cloneable.appendTo(".container");
  
}).on("click", ".rem", function() 
{
  if($(this).hasClass("disabled") ) return;
  
  $(this).closest(".cloneable").remove();
  
  if($(".container .rem").length === 1)
    $(".container .rem").addClass("disabled");  
});

.btn.btn-primary
{
  background:#d5d5d5;padding:4px;cursor:pointer;
}

.btn.btn-primary.disabled
{
  background:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cloneable">
    <div>
      <a class="btn btn-primary add" role="button">Add cell</a>
      <a class="btn btn-primary disabled rem" role="button">Remove cell</a>
    </div>
    <iframe src="trial37.php"></iframe>
  </div>
</div>

票数 3

Stack Overflow用户

发布于 2022-04-23 16:42:28

$(".add").on("click", function(e) {  $(this).parent(".cloneable").clone(true).appendTo(".container");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="cloneable">
    <a class="btn btn-primary add" role="button">Add cell</a>
    <div>CONTENT</div>
  </div>
</div>

因此，在您的方法中发生的是，每次单击时都要执行一个新的查询，它返回所有的.clonable元素，然后克隆它们。您想要的是只找到与您单击的项相关的项，因此您希望从单击项目的$(this)开始，然后可以使用parent()方法在DOM树上查找选择器。

在这种情况下，它可以帮助您在单击事件中放置一个debugger;，然后一次执行一个方法。就像$('.clonable')。然后，您可以看到，它每次都会变大，并且它们指向所有现有的元素。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71981568

复制

相似问题

问jQuery事件多次触发
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery事件多次触发EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery事件多次触发
EN