javascript asp：jQuery 对话框中的按钮不触发 OnClick 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16448380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
asp:Button in jQuery dialog box not firing OnClick event
提问by MassStrike
I have an asp:Button inside a jQuerydialog for which the OnClickevent isn't firing. I'm using the PostBackUrlproperty to navigate to another page, but I want to setthis property in the OnClickevent so that I can append a query string variable according to the name of a file they upload in the dialog. I posted a question about this dialog earlier, because I couldn't get it to post back at all, but that's been fixed. Clicking the button posts back fine, and I can set the PostBackUrlproperty in the asp markup, or in the Page_Load()of the code behind. But I can'tget the OnClickfunction to fire for some reason, and that's where I want to setthe PostBackUrl. Here's the .aspx...
我在一个jQuery对话框内有一个 asp:Button ，该OnClick事件没有触发。我正在使用该PostBackUrl属性导航到另一个页面，但我想在事件中设置此属性，OnClick以便我可以根据他们在对话框中上传的文件的名称附加查询字符串变量。我之前发布了一个有关此对话框的问题，因为我根本无法将其发回，但这已得到修复。单击按钮返回正常，我可以PostBackUrl在 asp 标记中或在Page_Load()后面的代码中设置该属性。但我不能让OnClick功能火灾出于某种原因，而这也正是我想设置的PostBackUrl。这是.aspx...
<form id="frmDialog" runat="server">
<asp:Button ID="btnDisplayDialog" runat="server" Text="Click to Display Login Dialog" OnClientClick="showDialog(); return false;" />
<div class="divInnerForm"></div>
<div class="divDialog" style="display: none">
<table style="width: 100%;">
<tr>
<td>First Name: <asp:TextBox ID="txtFirstName" runat="server" Text=""></asp:TextBox></td>
<td>Last Name: <asp:TextBox ID="txtLastName" runat="server" Text=""></asp:TextBox></td>
</tr>
<tr>
<td>
How Old are You?
<asp:DropDownList ID="ddlAge" runat="server">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
</asp:DropDownList>
</td>
<td>
How Many Siblings do You Have?
<asp:DropDownList ID="ddlNumberSiblings" runat="server">
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
What is your birthday?
<input type="text" id="datepicker" name="datepicker" />
</td>
</tr>
<tr>
<td>
Please Choose a Picture to Upload:
<asp:FileUpload ID="fupUserPicture" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnUserPicture_Click" />
</td>
</tr>
</table>
</div>
</form>
...the jQuery script that displays the dialog and places it within the form...
...显示对话框并将其放置在表单中的 jQuery 脚本...
function showDialog() {
$('.divDialog').dialog({
modal: true, show: 'slide', width: 500,
open: function (event, ui) {
$('.divInnerForm').append($(this).parent());
}
});
}
...and the code behind with my OnClick function....
...以及我的 OnClick 函数背后的代码....
protected void btnUserPicture_Click(object sender, EventArgs e)
{
string fileName = "";
if (fupUserPicture.HasFile)
{
try
{
fileName = Path.GetFileName(fupUserPicture.FileName);
fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName));
}
catch (Exception ex)
{
}
btnSubmit.PostBackUrl = "~/Profile.aspx?pic=" + fileName;
}
}
EDIT: Ok, here's how the submit button in the dialog actually renders as HTML. I think this may be the problem. As you can see, the javascript onclick simply provides "Profile.aspx" as the post back url, even though it seems to me any server side code should execute first and foremost. This is within the form...
编辑：好的，这是对话框中的提交按钮实际呈现为 HTML 的方式。我认为这可能是问题所在。如您所见，javascript onclick 仅提供“Profile.aspx”作为回发 url，尽管在我看来，任何服务器端代码都应该首先执行。这是表格内...
<input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit">
..and here's how it renderes if I remove btnSubmit.PostBackUrl = "~/Profile.aspx"from the Page_Load()function....
..如果我btnSubmit.PostBackUrl = "~/Profile.aspx"从Page_Load()函数中删除，它是如何呈现的....
<input id="btnSubmit" type="submit" value="Submit" name="btnSubmit">
EDIT 2: ok so I've added another hidden asp button outside of the dialog, and the button inside the dialog now calls a javascript function which triggers the OnClickevent of the hidden button. Same thing, the javascript function runs fine, but btnHidden_Click()function does not run!I'm at a total loss, at this point I literally have no idea why this isn't working. Here's the new Hidden Button, outside of the dialog div but inside of the form as you can see....
编辑 2：好的，所以我在对话框外添加了另一个隐藏的 asp 按钮，对话框内的按钮现在调用一个 javascript 函数来触发OnClick隐藏按钮的事件。同样的事情，JavaScript函数运行良好，但btnHidden_Click()功能does not run!我在一个总损失，在这一点上我真的不知道为什么，这是行不通的。这是新的隐藏按钮，在对话框 div 之外，但在表单内部，如您所见....
</div>
<asp:Button ID="btnHidden" runat="server" Text="" Visible="false" ClientIDMode="Predictable" OnClick="btnHidden_Click"/>
</form>
...here's the button inside the dialog with the OnClientClick event, which as I've said runs fine...
...这是带有 OnClientClick 事件的对话框内的按钮，正如我所说，它运行良好......
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forcebtnHiddenClick(); return false;" />
And here's the OnClick function in the code behind for btnHidden, though it's exactly the same as before...
这是btnHidden背后代码中的OnClick函数，虽然它和以前完全一样......
protected void btnHidden_Click(object sender, EventArgs e)
{
string fileName = "";
if (fupUserPicture.HasFile)
{
try
{
fileName = Path.GetFileName(fupUserPicture.FileName);
fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName));
}
catch (Exception ex)
{
}
Response.Redirect("~/Profile.aspx?pic=" + fileName);
}
}
...and the javascript function that runs, but for some reason doesn't result in btnHidden_Click running...
...以及运行的 javascript 函数，但由于某种原因不会导致 btnHidden_Click 运行...
function forcebtnHiddenClick(e) {
//__doPostBack('btnHidden', 'OnClick');
$('#btnHidden').trigger('click');
}
..as you can see I've tried both .trigger('click') and __doPostBack(), both to no avail.
..如您所见，我尝试了 .trigger('click') 和 __doPostBack()，但都无济于事。
EDIT: Ok, so the problem is definitely the
编辑：好的，所以问题肯定是
function forcebtnHiddenClick() {
__doPostBack('btnHidden', '');
}
function, which is not actually triggering the btnHidden_Clickevent. When I make btnHiddenvisible and click it directly, the btnHidden_Clickfunction runs fine.
函数，实际上并没有触发btnHidden_Click事件。当我使btnHidden可见并直接单击它时，该btnHidden_Click功能运行良好。
EDIT: After TONS of searching, found this and got it to work...
编辑：经过大量的搜索，找到了这个并让它工作......
function forcebtnHiddenClick() {
<%= ClientScript.GetPostBackEventReference(btnHidden, string.Empty) %>;
}
I don't know why
我不知道为什么
__doPostBack(<%= btnHidden.ClientID %>, '')
doesn't work.
不起作用。
回答by Abide Masaraure
Try this
试试这个
function showDialog() {
$('.divDialog').dialog({
modal: true, show: 'slide', width: 500
});
$(".divDialog").parent().appendTo($("form:first"));
}
You should be appending divDialogto the form not that empty divInnerForm.Then your button will be in the form and its on click event will fire happily.
您应该将divDialog附加到表单而不是那个空的divInnerForm。然后您的按钮将在表单中并且它的点击事件将愉快地触发。
Update
更新
Try also using onclient click.Then wire this attribute to a function which will force a post back on the hidden button.
也尝试使用客户端单击。然后将此属性连接到一个函数，该函数将强制回发隐藏按钮。
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forceClick();" />
<asp Button id="hidButton" runat="server" onclick="hidButton_Click" />
function forceClick(){
__doPostBack('<%#hidButton.UniqueId %>');
}
Then use the event handler hidButton_Click to put your code.
然后使用事件处理程序 hidButton_Click 来放置您的代码。
回答by writeToBhuwan
$(this).parent().appendTo('form')
should work fine.. Append it to the form to fire server side events
应该可以正常工作..将其附加到表单以触发服务器端事件
回答by Rick
When I use the jQuery dialog, I always use the buttons that come as part of the dialog. Then when they're clicked, I call a javascript function to perform my action.
当我使用 jQuery 对话框时，我总是使用作为对话框一部分的按钮。然后当他们被点击时，我调用一个 javascript 函数来执行我的操作。
If I need to handle a PostBack from those buttons, then I create a separate ASP.Net button on the page - this is the button I use to handle my OnClick event. The user won't click this ASP.Net button, though (I hide it with css so it's not visible on the page). Instead, the javascript function I call when they click the dialog button will call code that will mimic a click of my ASP.Net button.
如果我需要从这些按钮处理回发，那么我会在页面上创建一个单独的 ASP.Net 按钮 - 这是我用来处理我的 OnClick 事件的按钮。但是，用户不会单击这个 ASP.Net 按钮（我用 css 隐藏它，因此它在页面上不可见）。相反，当他们单击对话框按钮时我调用的 javascript 函数将调用将模拟单击我的 ASP.Net 按钮的代码。
The result is that when the dialog button is clicked, the page will PostBack as though the ASP.Net button was clicked, and I can handle it via my OnClick event.
结果是，当单击对话框按钮时，页面将像单击 ASP.Net 按钮一样回发，我可以通过我的 OnClick 事件处理它。
Here's some sample code (in VB.Net)...
这是一些示例代码（在 VB.Net 中）...
Dim csm As ClientScriptManager = Page.ClientScript
Dim js As New StringBuilder
js.AppendLine("function handleSubmitMyButton() {")
js.AppendLine(csm.GetPostBackEventReference(MyButton, ""))
js.AppendLine("}")
csm.RegisterClientScriptBlock(Me.Page.GetType, "create_call_to_MyButton", js.ToString, True)
When the page is built, it will include the handleSubmitMyButton() javascript function. The dialog button click will call this function, which will trigger the PostBack as though the 'MyButton' button was clicked.
构建页面时，它将包含 handleSubmitMyButton() javascript 函数。单击对话框按钮将调用此函数，该函数将触发 PostBack，就像单击了“MyButton”按钮一样。
Usually I don't have to hide the ASP.Net button with css. It's often the button that gets clicked to open the dialog. I prevent the PostBack when it opens the dialog; then when the dialog button is clicked, I mimic the click of that button.
通常我不必用 css 隐藏 ASP.Net 按钮。通常是单击按钮以打开对话框。我在打开对话框时阻止回发；然后当对话框按钮被点击时，我模仿那个按钮的点击。
UPDATE: I saw several people mention the following line of code
更新：我看到有几个人提到了以下代码行
$(this).parent().appendTo(jQuery("form:first"));
I thought that's what you were attempting to do with your line of code:
我认为这就是你试图用你的代码行做的事情：
$('.divInnerForm').append($(this).parent());
If that doesn't do the same thing, though, you would need to have the code to add your fields to the form.
但是，如果这没有做同样的事情，则您需要使用代码将您的字段添加到表单中。
回答by Paolo
I use the modal dialog and i need to add a row, otherwise i get the modal transparency over the close button!
我使用模态对话框，我需要添加一行，否则我会在关闭按钮上获得模态透明度！
var $ObjDialog = $("div[id*='div_MyPopup']");
$ObjDialog.dialog({
modal: true
});
$ObjDialog.parent().prev().appendTo($("form:first"));
$ObjDialog.parent().appendTo($("form:first"));
回答by Albi
You can also make use of a LinkButton instead, the OnClick does cause a postback with this one, no need to adjust any jquery then.
您也可以改用 LinkButton，OnClick 确实会导致回发，此时无需调整任何 jquery。
