使用事件侦听器克隆bootstrap元素 [英] Cloning a bootstrap element with an event listener

问题描述

我正在尝试克隆bootstrap提供的数据切换行为的bootstrap元素：

I'm trying to clone a bootstrap element that has data-toggle behavior provided by bootstrap:

HTML

<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>
</div>
</div>

克隆后，我正在更改 ID 将 div 添加到新的唯一ID，并将按钮的数据目标指向新div 。

After cloning, I am changing the ID of the div to a new unique id, and the data-target of the button to point to the new div.

JS

  var header = objectContainer.clone(true);
  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);

按钮和div是我克隆的对象容器的子项。

The button and div are children of the object container I am cloning.

有时这会有效，但有时候我最终会得到一个按钮，它仍会扩展和收缩原始div，即使我检查HTML时，ID看起来也是正确的。

Sometimes this works, but sometimes I end up with a button that still expands and contracts the original div, even though when I inspect the HTML, the IDs look correct.

我怀疑复制的事件处理程序可能会硬编码对要扩展和收缩的div的id的引用，这就是为什么只修复ID DOM元素不起作用。但是，这并不能解释为什么有些克隆有效，有些则不然。

I suspect that the event handler that is copied may be hard coding the reference to the id of the div to be expanded and contracted, which is why just fixing the IDs in the DOM elements doesn't work. However, that doesn't explain why some of the clones work and others do not.

克隆附有引导行为的东西的正确方法是什么？

What is the correct way to clone something that has bootstrap behaviors attached to it?

所以，有几个答案指出只需从我的克隆中删除 true （）调用将避免复制事件监听器。所以我现在意识到我的问题比我在这里过分简化的问题要复杂一些。我会把它作为一个单独的问题。 （克隆Bootstrap元素但不是全部事件监听器）

So, a couple of answers have pointed out that just removing true from my clone() call will avoid copying the event listener. So I now realize that my problem is a little more complicated than the one I oversimplified here. I will ask it as a separate question. (Cloning a Bootstrap element but not all of the event listeners)

推荐答案

到目前为止你的代码还可以，只需删除 true 来自 clone（）不需要。

So far your code is ok, just remove true from clone() it's not needed.

更新

此布尔值值表示是否应将事件处理程序与元素一起复制。默认值为 false 。因此，当我们调用 .clone（）方法而不传递任何布尔值值时，它只是复制元素而不是附加到它的事件处理程序。但是，当我们传递值 true 时，它会复制附加到其上的元素和任何事件处理程序。

This Boolean value indicates whether event handlers should be copied along with the elements. The default value is to the false . So, when we were calling the .clone() method without passing any Boolean value, it was just copying the elements but not the event handlers attached to it. But, when we pass the value true , it copies both the elements and any event handlers attached to it.

但 Bootstrap 正在处理动态对象的事件处理程序，因此您不需要 true 克隆。

But Bootstrap is handling the event handlers for dynamic objects so you don't need to true in clone.

LIKE

如果您正在处理使用这种方式动态对象的事件

If you're handling events for dynamic objects using this way

$(".btn").click(.....); 
// This button was dynamically created and you want a click event for it, 
// but it wont work because at the time of event binding this button wasn't exist at all.

但是

您需要使用事件委托来处理动态对象的事件 技术。

You need to handle events for dynamic objects using event delegation technique.

 $(document).on("click",".btn",function(){ .... });

这将有效，因为事件处理程序绑定到高于 DOM 树（在本例中为文档），当事件到达源自与选择器匹配的元素的元素时将执行，
这就是 Bootstrap 对于动态对象，如果动态对象需要，也会执行相同的操作。她的 JSFiddle 。

This will work, because the event handler is bound to an element higher up the DOM tree (in this case, the document) and will be executed when an event reaches that element having originated on an element matching the selector, And that's what Bootstrap does for dynamic objects, also you do the same if needed for dynamic objects. Hers is JSFiddle for this.

此外，您还需要在 div 中包装整个可折叠部分进行克隆。

Also you need to wrap the whole collapsible part in a div for cloning.

注意：使用 .clone（）有 - 生成具有重复 id 属性的元素的效果，这些属性应该是唯一的。在可能的情况下，建议避免使用此属性克隆元素或使用类属性作为标识符。

Note: Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

因此，您需要更新克隆后 data-target 和 div id 属性，以便新创建的按钮目标新创建的折叠面板

So, you need to update data-target and div id attribute after cloning, so that newly created button targets the newly created collapse panel

我正在使用 jQuery 。

以下是代码代码段

$(function(){
  var target = "collapsible_obj_";
  var i = 1;
  
  $("#button").click(function(){
    $(".parent_colapse:last").clone().insertAfter(".parent_colapse:last");        
    $(".parent_colapse:last > button").attr("data-target", "#"+target+i);
    $(".parent_colapse:last .collapse").attr("id", target+i);
    i++;
  });
  
  $(document).on("click",".button",function(){
     alert();
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="parent_colapse">
<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 type="button" class="button">click</button>
</div>
  </div>
<button type="button" id="button">Clone</button>

关于您的问题您没有显示完整的脚本这就是我们无法解决的问题找到错误。 LIKE 我们不知道 objectContainer 还是 collapsibleObjCounter 那是什么？

About your question you haven't shown your full script that's the reason we are unable to find the bug. LIKE we don't know objectContainer nor collapsibleObjCounter what that is ?

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