编辑：
有些人建议直接在表单上提交提交。这不是我想要实现的目标。具体来说，我希望能够在输入类型='submit'上调用click（）事件，并让它像通常那样提交表单。 jQuery UI对话似乎干扰了这种正常行为。请查看我创建的jsFiddle链接，因为问题可以在那里重新创建。
（首先我已经在StackOverflow上看到了这个问题，但答案在我的情况下不起作用：jQuery UI Dialog with ASP.NET button postback）
所需行为：
在我的页面上，我有一个隐藏字段和一个提交按钮（通过CSS隐藏）。
我想要做的是使用JavaScript以编程方式单击此按钮，从而导致提交表单。最重要的是....我想从jQuery UI对话框中触发所有这些。基本上，用户将在jQuery UI对话框中进行选择，这将导致整个页面被提交和重新加载。
问题陈述
触发按钮点击这样通常可以正常提交表单。但是，当从jQuery UI对话框中触发操作时，它会失败。
正如你在我的jsFiddle代码中看到的，我在提交按钮上调用了jQuery的click（）函数....但是表单实际上并没有提交！该按钮确实被JavaScript点击，但“表单提交行为”本身并未发生。页面未发布。
我相信jQuery UI对话框会以某种方式干扰我尝试以编程方式单击的按钮的表单提交行为。
我想以编程方式触发按钮点击的原因：
我不能将按钮位于内对话框中的提交按钮本身。在我的例子中，我创建了一个可重用的JavaScript控件，它包含了一个jQuery UI对话框。这个JS控件允许用户选择一个员工。但是，当员工被选中时，所需的行为并不总是：表单提交。 （有时我可能希望在页面上显示已挑选的员工，但尚未执行提交。）
其他详细信息：
此问题并非特定于ASP.NET，但这里有一些其他详细信息可帮助解释我为什么要尝试这一切。我正在使用.NET 4.5编写ASP.NET Web窗体应用程序。我已经开始越来越多地为我的页面使用JavaScript，但是在这个特定的页面上，我想触发一个实际的回发到服务器，这样我就可以处理ASP.NET页面生命周期中的按钮单击事件并填充GridView。这就是为什么我希望能够使用JavaScript来点击一个asp：按钮，这反过来会导致表单提交。
最重要的是......自己动手---＆gt;请参阅下面的jsFiddle链接.....
同样，这个问题并非特定于ASP.NET。我已经能够使用常规HTML和jQuery UI在JsFiddle上重新创建相同的问题。这是JsFiddle链接：
正如您在代码中看到的，我已经尝试使用通过jQuery DOM操作在表单内移动jQuery UI Dialog的“修复”。这似乎无法解决问题。
谢谢！我感谢任何帮助！
HTML
<html>
<head></head>
<body>
<form action="http://www.google.com/index.html" method="post">
<input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
<br /><br /><br />
The button below submits the form correctly if you click it.<br />
However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
</b><br />
<input type="submit" value="Submit Form" id="btnSubmitForm" />
<input type="hidden" id="hdnEmployeeChosen" value="" />
</form>
<div id="divPopup" class="dialogClass" style="display: none;">
Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
<br /><br />
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
Weird Al Yankovic
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
Count Dracula
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="David" />
David Copperfield
</div>
</div>
</body>
的JavaScript
$(document).ready(function ()
{
var jqueryDialog = $('#divPopup')
.dialog({
autoOpen: false,
modal: true,
title: 'My Dialog',
width: 300,
height: 300,
draggable: false,
resizable: false
});
// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));
$('#btnOpenDialog').click(function () {
jqueryDialog.dialog('open');
});
$('.pickButton').click(function () {
// Put picked value into hidden field
var pickedEmployee = $(this).attr('employeeName');
$('#hdnEmployeeChosen').val(pickedEmployee);
// Try to cause a submit (ASP.NET postback in my case)
// THIS PART DOES NOT WORK.................
$('#btnSubmitForm').click();
//alert($('#hdnEmployeeChosen').val());
});
});
CSS
form {
margin: 5px;
border: 1px solid black;
background-color: #EEE;
padding: 15px 5px;
}
.dialogClass {
border: 1px solid black;
padding: 5px;
margin: 5px;
background-color: LightBlue;
font-size: 14px;
}
.pickButton {
margin-right: 5px;
}
.divOptions {
margin-bottom: 3px;
}
答案 0 :(得分：7)
我遇到了类似的问题，我可以单步执行正确的提交按钮，但表单只是没有提交。在单步执行jquery对话框代码并且没有找到它如何阻止事件传播之后，我就决定在提交之前立即隐藏对话框。适用于你的小提琴：http://jsfiddle.net/Q4GgZ/1/
jqueryDialog.dialog('close'); // <- THIS WORKS
$('#btnSubmitForm').click();
答案 1 :(得分：3)
我遇到了同样的问题，以下一系列建议对我有用。
$(this).parent().appendTo("form:first"); open选项见下面的JavaScript
var jqueryDialog = $('#divPopup')
.dialog({
autoOpen: false,
modal: true,
title: 'My Dialog',
width: 300,
height: 300,
draggable: false,
resizable: false,
open: function() {
$(this).parent().appendTo('form:first');
}
});
答案 2 :(得分：2)
正如LouD所提到的，修复方法是在＆＃34;点击＆＃34;之前关闭对话框。你的按钮。至于为什么这可以解决任何问题，您需要深入了解JQuery UI源代码。在版本1.8.9中，有用于模态覆盖的代码：
events: c.map("focus,mousedown,mouseup,keydown,keypress,click".split(","), function (a) {
return a + ".dialog-overlay"
}).join(" "),
...
c(document).bind(c.ui.dialog.overlay.events, function (d) {
if (c(d.target).zIndex() < c.ui.dialog.overlay.maxZ) return false
})
它为元素上的所有输入事件返回false（基本上是preventDefault()）＆＃34;＆＃34;它。它不仅仅是一个巨大的div，它阻止用户通过＆＃34; over＆＃34;他们。它还手动阻止所有输入事件，无论用户还是JS生成它们。
关闭模态对话框会破坏叠加层，这会让您的JS点击事件完全传播，并提交表单。
答案 3 :(得分：1)
为表单指定id属性：
<form id="myForm" action="http://www.google.com/index.html" method="post">
然后提交表格：
$('.pickButton').click(function (e) {
e.preventDefault();
$('#myForm').submit();
// more code
}
答案 4 :(得分：1)
如果有人仍在寻找答案，那么这对我有用。
setTimeout（“$（'＃”+ id +“'）。click（）;”，0）;
id是e.currentTarget.id，其中事件是单击提交按钮。将该id传递给必须触发click事件的方法。
.trigger（“click”）不会触发回发，但上面的代码确实如此。
答案 5 :(得分：0)
我看不到提交按钮的Click事件的代码..
而不是
$('#btnSubmitForm').click();
尝试
$('form').submit();
或者在提交按钮的点击事件处理程序中提交表单。
答案 6 :(得分：0)
点击提交按钮 。我在您的脚本中添加了以下代码...
$("#btnSubmitForm").on("click", function() {
console.log("submit!");
});
并显示单击该按钮。
正如Sushanth所说，使用表单的submit()方法，或者如果你想触发asp.net的回发，那么请查看__doPostBack()
答案 7 :(得分：0)
这可能是一个错误，取决于你的jQuery版本
look at this article about the same problem
在所有情况下，由于您要提交表单，最简单的方法是使用.submit()方法。
答案 8 :(得分：0)
因为它复制了多个对象。
所以你可以使用：$('[id="btnCreate"]').last().trigger('submit');
last method get last element。
您更新$('#btnSubmitForm').click();
尝试：$('[id="btnSubmitForm"]').last().trigger('click');
$('[id="btnSubmitForm"]')获取btnSubmitForm的所有相同ID。
例如：
$("#dialog").dialog({
autoOpen: false,
//maxWidth: 600,
//maxHeight: 500,
minWidth: 580,
width: 580,
height: 500,
title: "titleDemo",
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
modal: true,
buttons: {
"Create": {
text: "OK",
id: "btnCreates",
click: function (event) {
$('[id="btnCreate"]').last().trigger('submit');
}
},
Cancel: function () {
$(this).dialog("close");
}
}
});
答案 9 :(得分：0)
问题是由于使用id元素作为选择器引起的...当调用jquery ui对话框时，它会将所需的块复制到生成的容器中，这意味着像#form_name这样的特定标识符现在会让重复项复杂化jquery选择器......
我的解决方案是切换到类标识符，然后使用更具体的路径来选择按钮ex：$（jQuery_dialog_box .class name）.submit（）（或click（））
答案 10 :(得分：0)
默认情况下，Jquery UI对话框会阻止任何按钮提交（至少根据我的经验）。话虽如此，我想通过Visual Studio将任何按钮上的“提交行为”更改为“False”然后工作。我知道这与它应该是完全相反的但是如果你这样做，那么JQuery UI对话框内的按钮将回发并工作。
我还发现几个小时后，除非你在Jquery UI对话框对象上调用destroy方法，否则在回发后的ASP.net中无法识别JQUI对话框中的任何字段。
我真的很喜欢这个控件，直到我开始深入了解使用真实应用程序和基本弹出窗口之外的细节，我不确定这个控件是否已经完全准备好了黄金时间。
答案 11 :(得分：0)
我带着一个非常类似的问题来到这里，但由于我在这个问题上丢失了几个小时，我将其发布给未来的读者。
此代码存在一些问题：
如果对话框是模态的，那么您似乎无法触发对话框外的其他元素的事件。如果使用选项modal：false进行对话，则触发器将正常工作。我希望对话框是模态的，所以这个解决方案不是一个选项。
由于对话框是模态的，您必须将按钮放在对话框中。您可以隐藏它并通过您的分类按钮触发。我修改了javacript部分并尝试使用小提琴并适用于您的情况。
HTML
<form action="http://www.google.com/index.html" method="post">
<input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
<br /><br /><br />
The button below submits the form correctly if you click it.<br />
However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
</b><br />
<input type="hidden" id="hdnEmployeeChosen" value="" />
<div id="divPopup" class="dialogClass" style="display: none;">
Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
<br /><br />
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
Weird Al Yankovic
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
Count Dracula
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="David" />
David Copperfield
</div>
<input type="submit" value="Submit Form" id="btnSubmitForm" style="display:none"/>
</div>
</form>
</body>
JAVASCRIPT
$(document).ready(function ()
{
var jqueryDialog = $('#divPopup')
.dialog({
autoOpen: false,
modal: true,
title: 'My Dialog',
width: 300,
height: 300,
draggable: false,
resizable: false
});
// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));
$('#btnOpenDialog').click(function () {
jqueryDialog.dialog('open');
});
$('.pickButton').click(function () {
// Put picked value into hidden field
var pickedEmployee = $(this).attr('employeeName');
$('#hdnEmployeeChosen').val(pickedEmployee);
console.log("click button dialog");
// Try to cause a submit (ASP.NET postback in my case)
// THIS PART DOES NOT WORK.................
$('#btnSubmitForm')[0].click();
console.log("after click");
//alert($('#hdnEmployeeChosen').val());
});
});
你可以在小提琴中看到here
答案 12 :(得分：0)
此问题的简单解决方案是在 对话框打开后设置提交事件 。在提交事件触发之前，没有必要关闭对话框。
在.open（）方法期间覆盖对话框时，将禁用所有事件。因此，在打开对话框后设置所需的事件。
$('#btnOpenDialog').click(function () {
jqueryDialog.dialog('open');
// now setup events
$('#btnSubmitForm').on('click', function() {
// process submit event
});
});