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

我有这个jQuery代码的问题。它没有达到预期效果：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调用。

来源

2011-05-21 markcruz

我觉得你的代码没有太大的意义。调用'submit'的callbak被调用，但之后，表单将被提交，所以你永远不会看到提醒。不知道你想要做什么，你想要提交表单吗？ – morgar 2011-05-21 04:18:20

但它不提交。 – markcruz 2011-05-21 05:21:08

当您使用回调参数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); 
      } 
     ); 
    }); 

});

来源

2011-05-21 04:21:28

我认为这将不能工作，因为Ajax不是syncronous，该用于将无需等待答案提交。 – morgar 2011-05-21 04:24:25

是啊，这是真的:)至少事件将触发以正确的顺序... – 2011-05-21 04:30:09

但我将如何创建下拉平变化后一个Ajax调用？ – markcruz 2011-05-21 05:19:57

的.submit呼叫你的第一个例子是绑定到表单的提交事件的功能。从fine manual：

.submit(handler(eventObject))
处理器（eventObject）传递每次事件触发时执行的函数。

您需要绑定您提交处理程序：

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

别的地方，并呼吁submit作为你的第二个例子。

来源

2011-05-21 04:22:33

根据文档（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, 
     ); 
    }); 
});

来源

2011-05-21 15:58:15 morgar

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

$('#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);

我还没有运行这个代码，请原谅我犯的任何愚蠢的语法错误。但是，这应该让你在那里找到一些方法。祝你好运！ :)

来源

2011-05-21 16:54:37 cm2

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

回答

相关问题