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

Question

我有一个相当大的形式的div。也许20个领域。

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

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

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

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

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

我最近的想法是在任何可能需要的地方创建表单，并在时机成熟时显示它。

正如你所看到的那样，我非常矛盾，我的头疼，而且现在仍然是早上8点。我在哪里......： - （

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

P.S。如果你能想到一个更好的标题，请随时改变它。

Answer 1

使用全局变量和append方法的解决方案应该有效（如果正确实现）

查看演示 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/

Answer 2

使用jQuery.tmpl()插件

我一直都在使用这种场景。我正在将编辑器表单作为带有可变占位符的模板加载，并将其用于创建新实体实例以及编辑现有实例。

我不显示/隐藏它，即使它可以更快地工作。但我不得不承认我没有与DOM创建速度等相关的问题。我也没有观察到它，也没有用户报告过它......

Answer 3

的一个示例应该。

// Showing the form where you need it.
var the_form = $("#MyForm");
$('#container').append(the_form.css('display', 'block'));

// hiding the form
the_form.css('display', 'none');

如果这不起作用，请从项目中发布一些代码示例。

关于重复ID的说明：您提到无法复制ID，因为它会阻止jQuery UI正确附加按钮小部件。事实上，重复的ID可能导致整个文档中的javascript 出现问题;它使文件无效。如果上述示例不起作用，请确保在任何地方都没有重复的ID。

<强>更新

以下是如何实现目标的实例：http://jsfiddle.net/ZqpYC/

<强>更新

这是动画：http://jsfiddle.net/ZqpYC/1/

Answer 4

  

但是当我尝试在包含此表单的容器上使用empty时，它变得非常复杂，因为我将永远无法再次使用它。

那不是那么做的吗？我之前使用过单个隐藏的div并取得了很好的成功。

  

.button（）要求我使用一个需要依赖于按钮id属性的for属性的标签

.button（）如何需要标签？你能解释一下吗？