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 上触发提交；因此，调用您在第一个块中添加的处理程序。

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

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