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事件时,事件将被触发两次.我知道这是因为a <li>在dom中加了两次而且alert出现了两次.

罪魁祸首:

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

Answer 1

问题在于第一个$(document).ready()功能.我约束click的事件input[type=image]触发submit的窗体上的事件,但事实证明,图像输入已经做submit时默认点击.