JQuery - 添加/删除表单和 div答案

【问题标题】：JQuery - add/remove forms and divsJQuery - 添加/删除表单和 div
【发布时间】：2011-02-04 22:42:02
【问题描述】：

我确定我以前在某个地方看到过示例，但我似乎找不到它们。我有一个有 5 个按钮的页面。我希望每个按钮都加载不同的表单，而无需刷新。我可以使用 UpdatePanels，但这听起来有点矫枉过正（而且带宽成本很高）。我想一次性加载所有表单，因此单击按钮基本上会隐藏/显示相关表单。我不能使用html() 方法（按原样）执行此操作，因为表单可能非常复杂并且包含回发到服务器的 ASP.NET 控件。相反，我将表格放在单独的divs 中。

我试着做这样的事情：

                case "button1":

                    $(".current_form").show();
                    $("#divForm1").prependTo($('.current_form'));
                    break;

                case "button2":

                    $(".current_form").show();
                    $("#divForm2").prependTo($('.current_form'));
                    break;

这样做的问题是旧形式总是保留在那里，而不是被替换。是否可以将div 附加到 JQuery 中的给定容器？还是有其他更好的方法？

感谢您的帮助

完整代码

<script type="text/javascript">
    $(document).ready(function() {

        $("button").button();
        $("button").click(function() {

            switch ($(this).attr("value")) {
                case "button1":

                    $('.current_form').empty().show();
                    $("#divForm1").clone().prependTo($('.current_form'));
                    break;

                case "button2":

                    $('.current_form').empty().show();

                    $("#divForm2").clone().prependTo($('.current_form'));
                    break;




            }
            return false; //prevent postback
        });



    });

</script>

我正在使用这些 div 进行测试：

<div class="current_form">
<div id="divForm1" >

 This is div 1

</div>
</div>


<div class="current_form">
<div id="divForm2" >

  This is div 2

</div>
</div>

【问题讨论】：

标签： asp.net jquery forms html replace

【解决方案1】：

你可以这样称呼它：

$('.current_form').empty().show();
$("#divForm1").clone().prependTo($('.current_form'));

你的标记应该是这样的：

<!-- Possible <form> tag here -->
<div class="current_form"></div>
<!-- Possible </form> tag here -->
<div id="divForm1">
 This is div 1
</div>
<div id="divForm2">
  This is div 2
</div>

这会清除之前的表单，并创建一个副本您要预先放入 .current_form 的内容，这意味着原件仍然存在，您的按钮不会停止工作第一次使用后。

确保将您的<div id="divFormXX"> 元素放在提交的表单之外，这样原始值就不会被提交到服务器。

更新： 更好的选择，更少的标记和更少的 javascript :)
标记：

<div id="divForm1" class="form" style="display: block;">
 This is div 1
</div>
<div id="divForm2" class="form">
  This is div 2
</div>

Javascript：

$(function() {
  $("button").button().click(function() {
    $(".form").hide();
    $("#divForm" + $(this).attr("value").replace('button','')).show();
    return false;
  });
});

CSS：

.form { display: none; } //Hide the forms initially

【讨论】：

感谢您的回复。我尝试了该方法，我认为我更接近了。 current_form 的背景出现了，但它是空白的。如果我删除 empty() 方法，则表单会显示，但它会不断添加而不是替换它。
@superexsl - 这不应该发生，也许某处缺少中断，你能发布完整的代码吗？
@superexsl - 更新了答案，是否可以像这样移动标记？另一种方法是给divFormXX 元素一个类.form 或其他东西，然后隐藏/显示它们，如果这是一个选项，这将是一种更简单的方法，如果是这样，请告诉我，我会发布一个例子。
感谢您的帮助。这是新的标记，所以请随意做任何你认为最好的事情。我尝试了代码，它可以工作，但它似乎在屏幕的一侧创建了一个重复的副本。（但只有一次）
@superexsl - 添加了一个全新的选项，整体上更简单，它在加载时默认显示#divForm1 元素，如果不需要，只需删除该样式。这不是在四处移动元素，而是隐藏和显示事物，因此一次只能看到一个，这似乎是您所追求的……如果不是，请告诉我。