16

编辑：

有些人建议直接在表单上调用提交。这不是我想要达到的目标。具体来说，我希望能够在输入 type='submit' 上调用 click() 事件并让它像往常一样提交表单。jQuery UI 对话框似乎干扰了这种正常行为。请查看我创建的 jsFiddle 链接，因为问题可以在那里重新创建。

（首先我已经在 StackOverflow 上看到过这个问题，但答案在我的情况下不起作用： 带有 ASP.NET 按钮回发的 jQuery UI 对话框）

期望的行为：

在我的页面上，我有一个隐藏字段和一个提交按钮（通过 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:button，这反过来会导致表单提交。

最重要的是......自己试试 ---> 请参阅下面的 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;   
}
4

13 回答 13

6

只是有一个类似的问题，我可以逐步执行正确的提交按钮，但表单只是没有提交。在单步执行 jquery 对话框代码并没有找到它如何阻止事件传播之后，我只是决定做显而易见的事情并在提交之前隐藏对话框。也适用于您的小提琴：http: //jsfiddle.net/Q4GgZ/1/

jqueryDialog.dialog('close'); // <- THIS WORKS
$('#btnSubmitForm').click();
于 2014-01-14T20:40:25.847 回答
4

我遇到了同样的问题，以下一组建议对我有用。

  1. 将对话框附加到表单$(this).parent().appendTo("form:first");
  2. 将对话框附加到对话框open选项中的表单

归功于 Homam和他对另一个问题的评论。

见下文 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');
            }
        });
于 2015-02-10T17:18:54.390 回答
2

如果有人仍在寻找答案，那么这对我有用。

setTimeout("$('#" + id + "').click();", 0);

id 是 e.currentTarget.id ，其中事件是点击提交按钮。将该 id 传递给必须触发点击事件的方法。

.trigger("click") 不会触发回发，但上面的代码会。

于 2013-03-29T02:17:46.343 回答
2

正如 LouD 所提到的，解决方法是在“单击”按钮之前关闭对话框。至于为什么这会解决任何问题，您需要深入研究 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()）。它不仅仅是一个巨大的 div，它通过“越过”它们来阻止用户点击它们。它还手动阻止所有输入事件，无论是用户还是您的 JS 生成它们。

关闭你的模态对话框会破坏覆盖层，它允许你的 JS 点击事件完全传播，提交表单。

于 2014-07-14T20:00:48.140 回答
1

为您的表单分配一个 id 属性：

<form id="myForm" action="http://www.google.com/index.html" method="post">

然后提交表格：

$('.pickButton').click(function (e) {
  e.preventDefault();
  $('#myForm').submit();
  // more code
}
于 2012-10-18T23:23:08.177 回答
0

问题是由使用 id 元素作为选择器引起的......当调用 jquery ui 对话框时，它会将所需的块复制到生成的容器中，这意味着像 #form_name 这样的特定标识符现在会有重复混淆 jquery 选择器...

我的解决方案是切换到类标识符，然后使用更具体的路径来选择按钮 ex： $(jQuery_dialog_box.class name).submit() （或 click() ）

于 2013-12-09T23:46:54.157 回答
0

我来到这里时遇到了一个非常相似的问题，但是由于这个问题我浪费了几个小时，所以我将它发布给未来的读者。

这段代码有一些问题：

  1. 如果对话框是模态的，似乎您无法为对话框之外的其他元素触发事件。如果您使用选项 modal 进行对话框：false，则触发器将正常工作。我希望对话框是模态的，所以这个解决方案不是一个选项。

  2. 由于对话框是模态的，您必须将按钮放在对话框内。您可以隐藏它并通过您的分类按钮触发。我修改了 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());
});    

});

你可以在这里看到小提琴

于 2015-02-05T17:11:07.970 回答
0

因为它复制了多个对象。所以你可以使用：$('[id="btnCreate"]').last().trigger('submit');

last 方法获取最后一个元素。

你更新$('#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");
                }
            }
        });
于 2013-12-05T08:42:30.713 回答
0

我没有看到提交按钮的 Click 事件的代码。

代替

$('#btnSubmitForm').click();

尝试

$('form').submit();

或者在提交按钮的单击事件处理程序中提交表单。

于 2012-10-18T23:08:48.017 回答
0

正在单击提交按钮。我将以下代码添加到您的脚本中...

$("#btnSubmitForm").on("click", function() {
    console.log("submit!");
});

这表明该按钮已被单击。

正如 Sushanth 所说，使用submit()表单的方法，或者如果您想触发 asp.net 的回发，请查看__doPostBack()

如何使用 __doPostBack()

于 2012-10-18T23:10:23.743 回答
0

这可能是一个错误，取决于您的 jQuery 版本

看看这篇关于同样问题的文章

在任何情况下，当您要提交表单时，最短的方法是使用该.submit()方法。

于 2012-10-18T23:16:52.200 回答
0

默认情况下，Jquery UI 对话框会阻止任何按钮提交（至少根据我目前的经验）。话虽如此，我发现如果您通过 Visual Studio 将任何按钮上的“提交行为”更改为“False”，它就会起作用。我知道这与它应该是完全相反的，但如果你这样做，那么 JQuery UI 对话框中的按钮将返回并工作。

几个小时后，我还发现 JQUI 对话框中的任何字段在回发时都无法在 ASP.net 中识别，除非您在 Jquery UI 对话框对象上调用 destroy 方法。

我真的很喜欢这个控件，直到我开始深入了解在实际应用程序中使用它的细节，除了基本的弹出窗口之外，我不确定这个控件是否已完全准备好迎接黄金时段。

于 2013-12-11T00:25:49.417 回答
0

解决这个问题的简单方法是在对话框打开后设置提交事件。没有必要在提交事件触发之前关闭对话框。

当对话框在 .open() 方法期间被覆盖时，所有事件都被禁用。因此，在打开对话框后设置您需要的事件。

$('#btnOpenDialog').click(function () {
        jqueryDialog.dialog('open');   
     // now setup events 
        $('#btnSubmitForm').on('click', function() {
            // process submit event 
        });
});
于 2016-08-26T16:33:18.930 回答