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

Question

我有一个相当大的表格的 div。也许有 20 个字段。

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

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

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

所以我尝试创建一个全局变量：var MY_FORM = $("#MyForm");并.append(MY_FORM)在需要时使用它，但这不起作用。

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

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

正如你所看到的，我很矛盾，我的头很痛，而且现在还是早上 8 点……:-(

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

PS如果你能想到更好的标题，请随时更改它。

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/