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()会提交您的表单，但是如果您包含参数，它会将submit事件绑定到表单，但它不会提交它

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

您可以将其设为同步，但必须使用$.ajax而不是$.post，因为$.post不包含async选项。无论如何，我正在为您的具体问题提供解决方案，但我猜应该有更好的方法来实现它。

$(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事件。来自fine manual：

.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();
});

请记住，正如其他人已经说过的，如果您的操作设置为转到其他位置，您可能看不到绑定事件处理程序的结果，因此您没有明确说明您的操作的网址，而是将不得不使用某些东西来阻止表单进入action="javascript:void(0)"之类的任何地方。

为了使你的代码更清晰，你可以从一个未命名的函数中拉出ajax并将它放在一个命名的函数中并在更改时调用它，看起来像这样。

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

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

我没有运行此代码，请原谅我所犯的任何愚蠢的语法错误。但这应该会让你在那里的一些方式。祝好运！：）

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

4 个答案: