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

【问题标题】：Cloning a Bootstrap element but not all of the event listeners克隆 Bootstrap 元素但不是所有事件侦听器
【发布时间】：2016-08-01 20:26:39
【问题描述】：

在这个问题Cloning a bootstrap element with an event listener 中，我询问了如何在不复制引导提供的事件侦听器的情况下克隆元素。答案是不要将true 传递给clone() 命令。

事实证明，我现在看到我的问题比这要复杂一些。我实际拥有的是一个包含多个按钮的 div，其中一个控制关联 div 的展开/折叠，而其他按钮提供其他专用功能，这些功能由在创建原始文件时添加到 javascript 中的复杂点击侦听器提供。我需要将 click() 侦听器保留在其他按钮上。如果我在没有 true 参数的情况下调用 clone()，我也会失去所有这些听众。

那么有什么方法可以让我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 的 sn-p：

  $("#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);

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

抱歉，这不是可运行的代码 - 上下文太多，很难抽出一个简化的可运行示例。

【问题讨论】：

标签： javascript jquery twitter-bootstrap event-handling clone

【解决方案1】：

您应该尝试使用.on() 方法委托这些事件处理程序。

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

添加了 Jsfiddle 并添加了委托处理程序。

事件委托的好处：

您可能根本不需要复制/克隆这些处理程序

对于稍后在 DOM 中动态添加的节点（通过冒泡），它也能正常工作。

所以，上面的代码会在点击 bar-btn 时触发事件处理程序 someFunc，即使它是在克隆和粘贴 objectContainer 的实例之后。

要了解更多信息，请查看有关 event delegation 和 bubbling 的链接。

【讨论】：