Question

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

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

根据下面的代码，我认为会发生的是：警报（按钮），然后是警报（表单），反之亦然。 我不关心序列。

如果我运行它，警报（按钮）将会显示，但警报（表格）不会显示。

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

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

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*/ });

Answer 2

如果在点击上放置了返回false，则应取消默认行为。如果你想执行另一个，请在click函数中调用$（'form'）。submit（）。 e.g。

$('form').submit { //submits form}

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

Answer 3

单击按钮是否提交表单？如果是这样的话：

// Disable the submit action
$("form").submit(function(){
    return false; 
});

$("form button").click(function(){
    // Do some action here

    $("form").unbind("submit").submit();

});

如果您在单击按钮时未取消绑定submit事件，则提交将不执行任何操作。

Answer 4

这里的传播似乎有些混乱。事件传播（可以被stopPropagation禁用）意味着事件“冒泡”到父元素;在这种情况下，click事件将在表单上注册，因为它是提交按钮的父级。但是，表单上的提交处理程序当然不会捕获click事件。

您感兴趣的是默认操作，在单击提交按钮的情况下是提交表单。可以通过调用preventDefault或返回false来阻止默认操作。你可能正在做后者。

请注意，在不以显式return结尾的Javascript函数中，仍然会返回一个值，这是函数中最后一个命令的结果。你应该用return;或return true;结束你的点击处理程序。我不知道从哪里得到它。当没有明确的return语句时，Javascript函数实际上返回undefined。

2个相同动作的jQuery事件似乎相互抵消

4 个答案:

的 jsFiddle example

的 jsFiddle Example