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

我有这个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事件。 从精细手册 ：

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

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