3

jQuerysubmit()イベントが 2 回発生しますが、その理由がわかりません。

テンプレートエンジンを使用して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イベントをトリガーすると、イベントが 2 回発生します。これ<li>は、 が dom に 2 回追加され、alertも 2 回表示されるためです。

犯人:

click最初の呼び出しでイベント バインディングをコメント アウトする$(document).readyと、予想どおり、イベントは 1 回だけ発生します。最初のコードはどのようにしてダブル イベント トリガーを引き起こしているのでしょうか?

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 に答える