Question

我的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也会出现两次。

罪魁祸首：

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

Answer 1

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

Answer 2

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

修改

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

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

jQuery提交事件发生两次

2 个答案: