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/">…</form>
]
)
問題:
Enter送信ボタンを押すかクリックするか、submit
イベントをトリガーすると、イベントが 2 回発生します。これ<li>
は、 が dom に 2 回追加され、alert
も 2 回表示されるためです。
犯人:
click
最初の呼び出しでイベント バインディングをコメント アウトする$(document).ready
と、予想どおり、イベントは 1 回だけ発生します。最初のコードはどのようにしてダブル イベント トリガーを引き起こしているのでしょうか?