JQuery - 添加/删除表单和div

Question

我确定我以前在某处看过示例，但似乎无法找到它们。我有一个有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> 

Answer 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