jquery - 克隆 jQuery 对象，并将事件绑定(bind)到新对象

Question

我是一位经验丰富的程序员，但对 JQuery 很陌生。我正在尝试克隆 data-role="collapsible"对象，并希望使用前一个对象具有的事件绑定(bind)来执行此操作。我的代码如下:

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

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

编辑:

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

<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()。

1. 如果深度克隆可折叠元素，它会错误地引用原始元素的组件并切换该组件而不是其本身。
2. 如果您浅克隆可折叠元素，您将获得额外的结构，需要在应用collapsible()之前撤消/删除这些结构。否则你会得到这个结果:

所以选项是:

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

要执行第二个操作，首先我们看看 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();
});

您可能可以将某些操作合并为一个操作(例如展开)，但我将其留给您来做:)

想法:理想情况下，这些插件将允许应用于已经具有可折叠装饰的现有元素。

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