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