使用事件侦听器克隆bootstrap元素

Question

我正在尝试克隆一个bootstrap元素,它具有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,并将data-target按钮指向新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);

button和div是我正在克隆的对象容器的子代.

有时它可以工作,但有时我最终会得到一个仍然扩展和收缩原始div的按钮,即使我检查HTML时,ID看起来是正确的.

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

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

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

Answer 1

到目前为止,您的代码还可以,只需true从中移除clone()即可.

更新

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

但Bootstrap正在处理动态对象的事件处理程序,因此您无需true克隆.

喜欢

如果您events使用这种方式处理动态对象

$(".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.

但

你需要处理的事件使用动态对象的事件委托技术.

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

这将起作用,因为事件处理程序绑定到DOM树上方的元素(在本例中为文档),并且当事件到达源自与选择器匹配的元素的元素时将执行,这就是Bootstrap所做的事情.动态对象,如果动态对象需要,也可以执行相同操作.她是JSFiddle.

此外,您需要将整个collapsible部分包装起来div进行克隆.

注意:使用.clone()具有生成具有重复id属性的元素的副作用,这些属性应该是唯一的.在可能的情况下,建议避免使用此属性克隆元素或使用类属性作为标识符.

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

我正在使用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>

关于你的问题,你没有充分script展示我们无法找到错误的原因.LIKE我们不知道objectContainer,也不collapsibleObjCounter是什么吗？