表單中的jQuery對話框按鈕導致POST

Question

我試圖在表單中放置一個模式對話框來幫助填寫字段。如果我將按鈕放在窗體外面，它按預期工作。如果我將按鈕放置在表單中，表單一旦被點擊就會發布。

Click事件

$("#openList").button().click(function() { 
    $("#list").dialog("open"); 
}); 

功能

<div id="list" title="Select one"> 
    @{ Html.RenderPartial("Index/_ListDialog"); } 
</div> 
<p> 
    <button id="openList">Open List</button> 
</p> 

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) 
{  
    <div id="ChildFields"> 
     @{ Html.RenderPartial("Index/_Fields"); } 
    </div> 
    @Html.HiddenFor(model => model.otherData) 

    <input type="submit" value="Submit" />  
} 

帖子形式

<div id="list" title="Select one"> 
    @{ Html.RenderPartial("Index/_ListDialog"); } 
</div> 

@using (Html.BeginForm("Index", "Home", FormMethod.Post)) 
{  
    <p> 
     <button id="openList">Open List</button> 
    </p> 
    <div id="ChildFields"> 
     @{ Html.RenderPartial("Index/_Fields"); } 
    </div> 
    @Html.HiddenFor(model => model.otherData) 

    <input type="submit" value="Submit" />  
} 

這是一個縮寫泛型版本的冗長表格。實際上，該按鈕旨在位於各組字段之間的表格的中間。是否有可能將按鈕放在表單中，而不會導致表單發佈？

Answer 1

將return false;添加到您的click處理程序的末尾。

Answer 2

試試這個：

$("#openList").button().click(function (e) { 
    e.preventDefault(); 
    $("#list").dialog("open"); 
});