3

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

我正在使用模板引擎动态构建我的 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/​">​…​&lt;/form>​ ]）

问题：

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

罪魁祸首：

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

4

2 回答 2

7

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

于 2011-03-29T05:28:40.543 回答
1

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

编辑

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

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

于 2011-03-29T04:11:09.390 回答