javascript - 处理页面上多个位置的相同 div 的最佳方法

Question

我有一个相当大的 div。可能有 20 个字段。

我使用此表单创建新用户和编辑现有用户。我有一个用户搜索，如果您单击结果列表中的任何结果，它会显示此表单。重点是，我经常在多个地方使用它。

我的问题是管理此问题的最佳策略是什么？

我的第一个想法是创建表单并在页面加载时隐藏它。然后将它附加到我需要它的地方并显示它。但是当我尝试在包含此表单的容器上使用 empty 时，事情变得非常复杂，因为我会让他们永远无法再次使用它。

所以我尝试创建一个全局变量:var MY_FORM = $("#MyForm"); 然后在需要时使用 .append(MY_FORM)，但是这没有用。

然后我考虑使用 .html() 在我需要的地方复制表单。但这对于复制的 ID 来说变得非常复杂。 .button() 要求我使用一个标签，该标签需要一个依赖于 buttons id 属性的 for 属性，该属性将与表单的多个实例一起复制。

我最近的想法是只在可能需要的地方创建表单，并在适当的时候显示它。

如您所见，我很矛盾，我的头很痛，而且现在还是早上 8 点。我在哪里... :-(

非常感谢任何帮助，谢谢!

附言如果您能想到更好的标题，请随时更改它。

Answer 1

您使用全局变量和附加方法的解决方案应该有效(如果正确实现)

查看演示 http://jsfiddle.net/gaby/aCnuR/

示例 html

<div id="place1" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place2" class="formplacer">
    <button class="getform">Bring form here</button>
</div>
<div id="place3" class="formplacer">
    <button class="getform">Bring form here</button>
</div>

<form id="multiform">
    input
    <input type="text" name="field1" />
    <input type="submit" name="submit" value="sumbit" />
</form>

示例 jquery

var myform = $('#multiform').detach();

$('.getform').click(function(){
    $(this).closest('.formplacer').append(myform);
});

---

更新
(使用动画而不使用分离，因为它不是真正需要的..)

var myform = $('#multiform').hide(0);

$('.getform').click(function(){
    var base = this;
    myform.slideUp('slow', function(){
        $(base).closest('.formplacer').append(myform.slideDown('slow'));
    });
});

演示:http://jsfiddle.net/gaby/aCnuR/6/