javascript - 同一 Action 上的 2 个 jQuery 事件似乎相互抵消

Question

**更新:我粘贴了工作代码以消除关于正在发生的事情的任何歧义。我还尝试删除两个处理程序上的 preventDefault，没有帮助*

我有一个表单，在单击按钮时，需要发生 JS 事件，并且需要提交表单。

根据下面的代码，我认为会发生的是:alert(button)，然后是 alert(form)，反之亦然。 我不关心顺序。

如果我运行它，警报(按钮)会出现，但警报(表单)不会出现。

如果我注释掉按钮的代码，就会出现表单警告。

我对这应该如何工作有一些根本性的误解吗？

jQuery(document).ready(function(){

  $("form.example").submit(function(event){
    event.preventDefault();
    alert("form submitted");
  });


  $("form.example button").click(function(event){
    event.preventDefault();
    alert("button clicked");
  });
)};


<form class="example" action="/v4test">
  <button type="submit">Meow!</button>  
</form>

Answer 1

OP编辑后

您不需要阻止默认的点击....只需提交...这是您的工作代码:

jsFiddle example

jQuery(document).ready(function(){
    $('form.example').submit(function(event){
        event.preventDefault();
        alert("form submitted");
        // stop submission so we don't leave this page
    });
    $('form.example button').click(function() {
        alert("button clicked");
    });
});​

---

旧答案

你可以简单地把你的 .click() 和 .submit() 系列处理程序，它们不应取消。您的伪代码中有一些语法错误……也许是这些导致了问题？

另一个潜在的问题是 $("form button") 针对 HTML <button>标签。如果你使用 <input type="button" />你应该使用 $("form:button") 并注意 <input type="submit" /> 不是按钮。无论如何，我假设您实际上正在使用 <button>标签。

通常 return false内部使用 .submit(function() { ... }); .这会阻止通过 HTML 提交表单。 s**[topPropagation][6]**非常不同。它处理停止事件“冒泡”到元素的父级......但我不明白这会对你的情况产生什么影响。

如果你正在做一个真正的 HTML 提交，确保把你的 .click()首先处理程序，因为真正的 HTML 提交会导致您离开页面。

如果您使用 return false里面.submit() ，表单将不会通过 HTML 提交，您必须使用 jQuery/Javascript/AJAX 处理提交。

无论如何，这里是.click()的演示和 .submit()事件连续触发...代码如下:

jsFiddle Example

$(function() {

    $('form button').click(function() {

        // Do click button stuff here.

    });

    $('form').submit(function(){

        // Do for submission stuff here
        // ...
        // stop submission so we don't leave this page
        // Leave this line out, if you do want to leave
        // the page and submit the form, but then the results of your
        // click event will probably be hard for the user to see.
        return false;

    });

});​

上面的代码将使用以下 HTML 触发两个处理程序:

<button type="submit">Submit</button>

---

请注意，我想您使用的是伪代码，但即便如此，它也更容易阅读，并且可以确定您没有编写语法错误，如果您使用:

$('form').submit(function() { /*submits form*/ }); 
$('form button').click(function() { /*does some action*/ });