克隆Bootstrap元素，但不是所有的事件侦听器 [英] Cloning a Bootstrap element but not all of the event listeners

问题描述

在此问题中，使用事件侦听器克隆引导元素我询问如何克隆元素而不复制引导提供的事件侦听器。答案是不通过 true 到 clone（）命令。

In this question Cloning a bootstrap element with an event listener I asked how to clone an element without copying the bootstrap-supplied event listener. And the answer is to not pass true to the clone() command.

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

As it turns out, I see now that my problem is a bit more complicated than that. What I actually have is a div containing several buttons, one of which controls the expand/collapse of an associated div, and others of which provide other specialized functionality, which are provided by complex click listeners added within the javascript when creating the original. I need to keep the click() listeners on those other buttons. If I call clone() without the true argument, I lose all those listeners as well.

所以有一些方法我可以使用监听器 clone（true），但是从扩展/合同中删除提供的引导的克隆监听器按钮，将ID更改为唯一的ID，然后以某种方式仍然可以获取引导提供的折叠功能（再次添加监听器，我猜根据克隆的div中的新更改的ID）？

So is there some way I can clone(true) with listeners, but remove the bootstrap-provided cloned listener from the expand/contract button, change the IDs to be unique IDs, and then somehow still get bootstrap provide that collapse functionality (add the listener again, I guess, based on the new changed IDs in the cloned div)?

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

I am creating a bunch of different collapsible objects, and then cloning some of them (into another tab pane).

我的代码的简化版本：

<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：

And a snippet from the 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（）功能。实际上，我有很多bar按钮，其功能需要保留。所以手动将click（）行为复制到克隆的版本会是凌乱的，但可能的。但是理想情况下，我想我想要的是在更改崩溃按钮和关联的div时的ID时，删除一个事件处理程序，并自动将bootstrap放入一个新的。

What I need here is to remove the event handler on the "click here" button and have bootstrap add a fresh one based on the changed IDs. If I clone without the true flag that seems to work correctly but I lose the click() functionality of the "bar" button. In reality I have a lot of "bar" buttons whose functionality I need to keep. So manually copying the click() behaviors to the cloned versions would be messy, but possible. But ideally I think what I want is a way to just remove the one event handler when I change the IDs on the collapse button and associated div, and get bootstrap to put a new one on automagically.

我很抱歉，这不是可运行的代码 - 有很多上下文，很难提取一个流线型的可运行示例。

I apologize that this isn't runnable code - there's so much context that it's hard to pull out a streamlined runnable example.

推荐答案

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

You should try to delegate those events handlers with the use of .on() method.

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

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

Added a Jsfiddle with added delegated handler.

事件委托的好处：

Benefits of event delegation:

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


• 在DOM中动态添加的节点将正常工作在以后的时间（通过冒泡）。

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

So, the above code will trigger the event handler someFunc on click of bar-btn even if it is after cloning and pasting an instance of objectContainer.

要了解更多信息，请查看有关事件委托和< a href =http://javascript.info/tutorial/bubbling-and-capturing =nofollow> bubbling 。

To learn more, check out these links about event delegation and bubbling.

这篇关于克隆Bootstrap元素，但不是所有的事件侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！