javascript - jQuery 提交事件发生两次

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 时事件绑定(bind)在第一个 $(document).ready调用，事件只发生一次，正如预期的那样。第一个中的代码如何导致双重事件触发？

Answer 1

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