Question

我是一名经验丰富的程序员，但对JQuery不熟悉。我正在尝试克隆data-role =“collapsible”对象，并希望使用前一个对象具有的事件绑定。我的代码如下：

$(document).ready(function() {
    var appointment = $("#appointment").clone(true).attr("id", "appointment1");
    $("#appointment-list").append(appointment);
});

问题在于，它会精确复制事件绑定，这意味着当您单击克隆对象时，原始文件将被展开。如何克隆它以便事件触发克隆上的操作？

编辑：

这是我编写的唯一代码，因为我在完成应用程序之前将其作为测试。其余部分取自JQuery移动库。被克隆的元素是一个可折叠的内容块，我将其用作动态添加块的模板。它的精简版本如下：

<div data-role="collapsible" id="appointment">
  <h1>Click me - I'm collapsible!</h1>
  <p>I'm the expanded content.</p>
</div>

编辑：

AlexKM，永远不要自己纠正母语为英语的人的拼写和语法，你显然不是这样。你在哪里完全把别人的帖子宰杀到几乎无法理解的地方？我已经恢复了你的改变。

Answer 1

问题已基于新信息和评论完全改变，因此将在此处添加适当的答案（我的其他答案现已删除）。

具体问题是您希望克隆页面上已有的jQuery UI可折叠对象。

不幸的是，jQuery UI在文档加载时附加到现有的可折叠对象（用data-role="collapsible修饰），这样做还会在每个项目上创建动态结构来管理打开和关闭状态。

它还存储引用可折叠元素的新件的状态数据。这意味着当它被单击时，它将引用克隆项目的原始子元素（而不是克隆）。

克隆包含的元素多于您的预期，因此您不能只对它们重新应用collapsible（）。

如果深度克隆可折叠元素，它会错误地引用原始元素的组件并切换那个元素而不是自身。
如果浅克隆可折叠元素，则可以在应用collapsible()之前获得需要撤消/删除的其他结构。否则你得到这个结果：

enter image description here

所以选项是：

了解如何在不更改结构的情况下附加新代码实例（硬）
撤消结构更改并重新应用可折叠（更简单）

要完成其中的第二项，首先我们要看看collapsible对元素的作用：

元素：

<div class="cloneme" data-role="collapsible"> <h1>Click me - I'm collapsible!</h1> <p>I'm the expanded content.</p> </div>
在

元素：

<div class="cloneme ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-role="collapsible"> <h1 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-inherit">Click me - I'm collapsible!<span class="ui-collapsible-heading-status"> click to expand contents</span> </a> </h1> <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true"> <p>I'm the expanded content.</p> </div> </div>

回答“撤消并重新申请”：

完成所有这些的代码是：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/yMcqB/2/

$(function () { var clone = $(".cloneme").clone(); $('.ui-content').append(clone); clone.addClass('ImAClone'); // Just for testing - REMOVE THIS clone.find('.ui-collapsible-heading-toggle').children().unwrap(); clone.find('.ui-collapsible-heading-status').remove(); clone.find('.ui-collapsible-content').children().unwrap(); clone.collapsible(); });

你可以将一些操作组合成一个操作（例如unwraps），但我留给你做：）

思考：理想情况下，这些插件可以应用于已经具有可折叠装饰的现有元素。

最终结果是两个独立的可折叠元素：

Answer 2

我不确定你是否理解jQuery.fn.clone是如何工作的，请考虑一下：

var $d1 = $('<div/>').prop('id', 'd1').on('click', function() { 
    alert('d1 clicked? The id is: ' + this.id); 
});
var $d2 = $d1.clone(true).prop('id', 'd2').click(); // alerts d1 clicked? The is is: d2

我试图证明jQuery在克隆对象上触发事件，但事件处理程序在两个元素之间共享。

从jQuery 1.7开始 - 你应该使用jQuery.fn.prop代替jQuery.fn.attr

使用绑定到新对象的事件克隆jQuery对象

2 个答案:

元素：

元素：

回答“撤消并重新申请”：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/yMcqB/2/