jQuery 内部提交功能不起作用

Question

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

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

但是，这是可行的：

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

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

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

Answer 1

第一个代码是为选择器 $('#list_count') 上的提交事件创建一个事件处理程序，这很可能是一个表单元素。第二个代码是调用该元素的提交方法。当您使用任何方法提交表单时会触发第一个，但它本身不会提交表单。你想做什么？

编辑

你想这样做吗

$('#select_dropdown').change ( function(){
    $.post("process.php", { name: "John" }, function(data) {
        alert("Data Loaded: " + data);
    });
});

Answer 2

你可以这样做：

$("#form_to_submit").submit(function(){
   //do your post stuff here
});

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

我正在做的是：

1. 为form_to_submit的提交事件定义处理程序
2. 当用户在select_dropdown 上进行选择时定义处理程序，即使在表单上也会调用提交。

==================

如果你有代码

$('#list_per_page').change ( function(){
    $('#list_count').submit( function(event){
        alert('It Works!');
    });
});

和

   $('#list_count').submit();

那么它就会起作用。原因是要出现“It Works”，您需要触发提交事件。

第一个块是在更改事件发生时向提交事件添加处理程序。所以当#list_per_page发生变化时，#list_count元素会添加一个提交事件处理函数。

即使在#list_count 上，第二个块也只是触发提交；因此，调用您在第一个块中添加的处理程序。

请记住，事件是异步发生的，您似乎希望您的代码按顺序运行。

我上面的代码不能解决你的问题；它仅用于演示目的。请告诉我们您想要实现的目标，然后人们可以建议一些最佳实践来帮助您:-)