jQuery 提交事件发生两次答案

【问题标题】：jQuery Submit Event Happens TwicejQuery 提交事件发生两次
【发布时间】：2011-03-29 03:20:14
【问题描述】：

我的 jQuery submit() 事件触发了两次，我不知道为什么。

我正在使用模板引擎动态构建我的 HTML，所以我最终多次调用$(document).ready()，如下...

<script>
$(document).ready(function() {
    $("form.search input[type='image']").click(function() { $(this).closest('form.search').submit() })
})
</script>

...稍后...

</script>
$(document).ready(function() {
    # I have put an `unbind('submit')` in here to be sure I have nothing else but this particular function bound to `submit`
    $('form.search').unbind('submit').bind('submit',function(event) {
        event.stopPropagation();
        search_term = $(this).find('input[type=text]').val()
        $new_keyword = $('<li class="filter keyword selected" name="'+search_term+'">'+search_term+'</li>')
        alert('event fired!')
        $("#keywords ul").append($new_keyword)
        do_search_selected()
        return false; // Stop the form from actually submitting
    })
})
</script>

表单 HTML：

<form class="search" method="get" action="/search/">

    <div>
        <input id="searchfield"type="text" name="keywords" value="Search" />
        <input id="searchbutton" type="image" src="{{ media_url }}images/search.png" />
     </div>
</form>

（仅供参考：当我在 Safari 控制台 $('form.search').get() 中运行它时，我得到了这个 [ <form class="search" method="get" action="/search/">…</form> ]）

问题：

当我点击 Enter 或单击提交按钮或以其他方式触发submit 事件时，该事件被触发两次。我知道这一点是因为 <li> 被两次添加到 dom 中，alert 也出现了两次。

罪魁祸首：

当我在第一个 $(document).ready 调用中注释掉 click 事件绑定时，该事件只发生一次，正如预期的那样。第一个代码怎么会导致双事件触发？

【问题讨论】：

选择器form.search 是否可能没有返回您期望的结果？
同时贴出这个绑定的按钮代码。如果你有一个示例页面，你也可以放一个指向该页面的链接。
表单的提交是否绑定到提交按钮和/或表单的提交事件？
@RSG 我相信它会返回我想要的，请查看我的编辑。（我应该绑定到<form> 元素，对吧？）
是的，没错。 do_search_selected() 中有什么？

标签： javascript dom jquery double-submit-problem

【解决方案1】：

问题出在第一个 $(document).ready() 函数中。我绑定了input[type=image] 的click 事件以在我的表单上触发submit 事件，但事实证明，默认情况下单击图像输入时已经执行submit。

【讨论】：

【解决方案2】：

选择表单并阻止默认提交处理程序应该都可以按照您的描述工作。我相当肯定一个不相关的错误（可能在do_search_selected()？）正在阻止调用达到'return false'，从而导致表单正常提交。

编辑

刚刚看到你最后的评论。您可以通过仅运行选择器、警报和覆盖来测试这一点。如果您在该函数中异步使用 AJAX，您可能需要设置 async。

另外，在语句末尾添加分号！

【讨论】：