为什么我不能在jQuery UI对话框内触发提交按钮？

编辑：

有人建议直接在表单上提交.这不是我想要实现的.我想要,特别是能够在输入type =’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对话框以某种方式干扰了我以编程方式点击的按钮的表单提交行为.

我想以编程方式触发按钮点击的原因：

我不能让对话框内的按钮自己提交按钮.在我的情况下,我创建了一个包含jQuery UI对话框的可重用JavaScript控件.这个JS控件允许用户选择一个员工.但是,当员工被选中时,所需的行为并不总是：表单提交. (有时我可能希望在页面上显示所选的员工,而不是执行提交.)

额外细节：

这个问题不是ASP.NET特有的,但这里有一些额外的细节可以帮助解释为什么我正在尝试所有这些.我正在使用.NET 4.5编写一个ASP.NET Web窗体应用程序.我已经开始越来越多地为我的页面使用JavaScript,但是在这个特定的页面上,我想触发实际的回发到服务器,所以我可以处理ASP.NET页面生命周期中的按钮单击事件并填充GridView.这就是为什么我想要使用JavaScript来单击一个asp：按钮,这反过来会导致一个表单提交.

最重要的是…尝试自己—>见下面的jsFiddle链接…..

再次,这个问题不是ASP.NET的特有的.我已经能够使用常规HTML和jQuery UI在JsFiddle上重新创建相同的问题.这是JsFiddle链接：

http://jsfiddle.net/fENyZ/18/

正如您在代码中可以看到的那样,我已经尝试通过jQuery DOM操作来使用表单中的jQuery UI对话框的“修复”.这似乎无法解决问题.

谢谢！我感谢任何帮助！

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;   
}

解决方法

只是有一个类似的问题,我可以通过正确的提交按钮执行,但表单只是不提交.在通过jquery对话框代码并没有找到如何保持事件不会传播之后,我刚刚决定在提交之前做出明显的隐藏对话框.在你的小提琴上工作： http://jsfiddle.net/Q4GgZ/1/

jqueryDialog.dialog('close'); // <- THIS WORKS
$('#btnSubmitForm').click();

为什么我不能在jQuery UI对话框内触发提交按钮？

解决方法

猜你在找的jQuery相关文章