Question

在这个问题Cloning a bootstrap element with an event listener中，我问过如何在不复制bootstrap提供的事件监听器的情况下克隆元素。答案是不将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);

我需要的是删除“单击此处”按钮上的事件处理程序，并根据更改的ID添加一个新的引导程序。如果我克隆时没有看似正常工作的true标志，但我丢失了“bar”按钮的click（）功能。实际上我有很多“条形”按钮，我需要保留其功能。因此，手动将click（）行为复制到克隆版本将是混乱的，但可能。但理想情况下，我认为我想要的是在更改折叠按钮和相关div上的ID时删除一个事件处理程序的方法，并获取引导程序以自动添加新的。

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

Answer 1

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

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

添加了Jsfiddle添加了委派处理程序。

事件授权的好处：


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

它也适用于稍后在DOM中动态添加的节点（通过冒泡）。

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

要了解详情，请查看以下关于event delegation和bubbling的链接。

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

1 个答案: