jQuery 提交功能不起作用（内部函数）

Question

我对这个 jQuery 代码有疑问。它没有按预期工作：

$('#select_dropdown').change ( function(){
    $('#form_to_submit').submit( function(event){
        $.post("list.php", { name: "John", time: "2pm" },
        function(data) {
            alert("Data Loaded: " + data);
        });
    });
});

但是，这有效：

$('#select_dropdown').change ( function(){
    $('#form_to_submit').submit();
});

我想知道为什么提交的内部函数不起作用。当用户从下拉列表中选择一个值时，必须提交表单。第二组代码可以工作，但是如果我添加要提交的内部函数，则不会。

基本上，我想在用户选择下拉菜单后进行一些ajax调用。

Answer 1

根据文档（ http://api.jquery.com/submit/ ），提交不带参数的 () 将提交表单，但如果包含参数，它将把 submit 事件绑定到表单，但不会提交。

因此，@Chris Fulstow 发布的代码将是提交表单的正确方法，但由于 ajax 不是同步的，函数将继续而不等待答案，然后将不会显示警报。

您可以使其同步，但必须使用 $.ajax 而不是 $.post，因为 $.post 不包含 <代码>异步选项。无论如何，我正在为您的具体问题提供解决方案，但我想应该有更好的方法来做到这一点。

$(function() {
    $('#select_dropdown').change(function() {
        $('#form_to_submit').submit();
    });

    $('#form_to_submit').submit(function(event) {
        $.ajax(
            url: "list.php",
            data: { name: "John", time: "2pm" },
            success: function(){
                alert("Data Loaded: " + data);
            },
            async:false,
        );
    });
});

Answer 2

当您使用回调参数 submit( handler(eventObject) ) 进行调用时，它只会附加一个事件处理程序。要触发表单提交，请调用不带参数的 submit()：

$(function() {

    $('#select_dropdown').change(function() {
        $('#form_to_submit').submit();
    });

    $('#form_to_submit').submit(function(event) {
        $.post(
            "list.php",
            { name: "John", time: "2pm" },
            function(data) {
                alert("Data Loaded: " + data);
            }
        );
    });

});

Answer 3

第一个示例中的 .submit 调用将函数绑定到表单上的提交事件。来自精细手册：

.submit( handler(eventObject) )
handler(eventObject) 每次触发事件时执行的函数。

您需要

$('#form_to_submit').submit(function(event){ /*...*/ })

在其他地方绑定您的提交处理程序：并像第二个示例中那样调用 submit 。

Answer 4

所以这里的问题是，在第一种情况下，您将事件处理程序绑定到元素，而在第二种情况下，您将触发它。让我们看看第一种情况：

$('#form_to_submit').submit(function(evt){ ... });

您本质上是在做类似的事情

document.getElementById('form_to_submit').addEventListener(
    'submit',
    function(evt){...},
    false
);

第二种情况是您指示表单提交，这就是它起作用的原因。如果您希望处理程序使用您的自定义代码，您将需要它们。首先绑定您的事件处理程序，然后 onchange 指示表单提交。

$('#form_to_submit').submit(function(evt){ ... });

$('#select_dropdown').change(function(){
    $('#form_to_submit').submit();
});

但请记住，正如其他人已经说过的那样，如果您的操作设置为转到另一个位置，您可能看不到绑定事件处理程序的结果，因此您不必显式声明操作的 url，而是必须使用诸如 action="javascript:void(0)" 之类的东西来阻止表单进入任何地方。

为了让你的代码更简洁，你可以将 ajax 从一个未命名的函数中取出，并将其放入一个命名的函数中，并在更改时调用它，这样它看起来像这样。

var fetchList = function(){
    $.ajax(...);
};

$('#form_to_submit').submit(fetchList);
$('#select_dropdown').change(fetchList);

我还没有运行过这段代码，请原谅我犯的任何愚蠢的语法错误。但这应该能让你有所收获。祝你好运！ :)