克隆Bootstrap元素，但不是所有事件侦听器

Cloning a Bootstrap element but not all of the event listeners

本文关键字：事件 侦听器 Bootstrap 元素 克隆      更新时间：2023-09-26

在这个问题中，使用事件侦听器克隆引导程序元素我询问了如何在不复制引导程序提供的事件侦听器的情况下克隆元素。答案是不将true传递给clone()命令。

事实证明，我现在发现我的问题比这更复杂了。我实际拥有的是一个包含多个按钮的div，其中一个按钮控制相关div的展开/折叠，其他按钮提供其他专门功能，这些功能是由创建原始按钮时在javascript中添加的复杂点击监听器提供的。我需要让click（）监听器保持在其他按钮上。如果我调用clone()而不使用true参数，那么我也会失去所有这些侦听器。

那么，我有没有办法用监听器clone(true)，但从扩展/收缩按钮中删除引导程序提供的克隆监听器，将ID更改为唯一ID，然后以某种方式仍然让引导程序提供折叠功能（我想，基于克隆div中新更改的ID，再次添加监听器）？

我正在创建一堆不同的可折叠对象，然后将其中一些克隆到另一个选项卡窗格中。

我的代码的简化版本：

<div class="container">
  <button aria-expanded="false" data-target="#collapsible_obj_0"    data-toggle="collapse" class="btn btn-link collapsed">click here</button>
  <div style="height: 0px;" aria-expanded="false" id="collapsible_obj_0" class="collapse">
    <span>foo</span>
    <button class="btn bar-btn">bar</button>
  </div>
</div>

以及javascript中的一个片段：

  $("#collapsible-obj-0 .bar-btn").click(function () {
    // do a bunch of stuff
  });
  this.collapsibleObjCounter = 15;  // really this will be one more than the number of exiting objects
  // objectContainer is the jquery object representing the top level div (passed into this method)
  var header = objectContainer.clone(true); // or not true, that is the question....
  var counter = this.collapsibleObjCounter++;
  var collapseId = "collapsible_obj_" + counter;
  header.find(".collapse").attr("id", collapseId);
  header.find("button[data-toggle='collapse']").attr("data-target", "#"+collapseId);

我在这里需要的是删除"单击此处"按钮上的事件处理程序，并让bootstrap根据更改的ID添加一个新的处理程序。如果我在没有true标志的情况下克隆，它似乎正常工作，但我失去了"栏"按钮的click（）功能。事实上，我有很多"栏"按钮，我需要保留它们的功能。因此，手动将click（）行为复制到克隆版本会很麻烦，但这是可能的。但理想情况下，我认为我想要的是一种方法，当我更改collapse按钮和相关div上的ID时，只需删除一个事件处理程序，并让bootstrap自动添加一个新的事件处理程序。

很抱歉，这不是可运行的代码——上下文太多了，很难拿出一个精简的可运行示例。

您应该尝试使用.on（）方法来委托那些事件处理程序。

$('body').on('click', '.bar-btn', someFunc);

添加了一个Jsfidle，其中添加了委托处理程序。

活动委托的好处：

  • 您可能根本不需要复制/克隆这些处理程序
  • 对于稍后动态添加到DOM中的节点（通过冒泡），它也可以正常工作

因此，上面的代码将在单击bar btn时触发事件处理程序someFunc，即使是在克隆和粘贴objectContainer的实例之后。

要了解更多信息，请查看有关活动委派和冒泡的链接。

相关文章：