Question

我在使用jQuery UI时遇到了一些麻烦。我用jQuery UI创建了一个对话框：到目前为止，非常好。我在jQuery UI对话框中设置了一个表单，然后是另一个故事。我写了一个非常简单的页面来说明：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testpage.aspx.cs"     Inherits="RiverCascade.testpage" %>
<head runat="server">    
<link rel="Stylesheet" type="text/css" href="Stylesheet1.css" />
<link rel="Stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.5.custom.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
function showModal() {
    $("#modalBox").dialog();
}
$(document).ready(showModal);    
</script>
</head>
<body>
<form id="form1" runat="server">
    <div>    
    <asp:Button runat="server" ID="button1" OnClick="button1_click" />                
        <div style="display:none" id="modalBox">
        <asp:Button runat="server" ID="button2" OnClick="button2_click" />        
        </div>

    </div>
    </form>
</body>
</html>

在上面的代码中，看到我刚刚导入了jQuery，jQuery UI和样式表，并设置了一个带有对话框的页面。对话框外有一个asp控制按钮1，对话框内有一个asp控制按钮。

当我点击button1时，会调用事件处理程序并且一切正常。但是，当单击button2时，jQuery对话框内的按钮没有任何反应。

为什么我的网页会这样表现？我该如何解决？

Answer 1

以下内容来自jQuery UI对话框source（你必须向下滚动）。

// ... more code here ...
uiDialog = (self.uiDialog = $('<div></div>'))
            .appendTo(document.body)
            .hide()
            .addClass(uiDialogClasses + options.dialogClass)
// ... more code here ...

基本上你之所以看到这种行为，是因为jQuery Dialog创建了一个新元素并将其附加到页面的body（在ASP.NET表单之外）。由于您的按钮现在位于ASP.NET表单之外，因此不会导致定期提交。

蒂姆B詹姆斯的解决方案应该掩盖这个问题。

Answer 2

尝试将此添加到button2

UseSubmitBehavior="false"

当在jQuery对话框中单击控件时，如何使我的asp.net页面回发？

2 个答案: