a
次の作業コードがあります。idのタグをクリックすると、「hi」がコンソールに出力されますinfo-toggle
。
<a href="#" id="info-toggle">More info</a>
$.ajax({
'url': '/maps/building/' + marker.urlID,
'dataType': 'json',
'success': function(data) {
infowindow.setContent(data.html_short);
infowindow.open(map, marker);
$(document).on('click', '#info-toggle', function(event) {
event.preventDefault();
console.log('hi');
});
}
});
ただし、.on()
呼び出しを次のように変更すると
$('#info-toggle').on('click', function(event) {
event.preventDefault();
console.log('hi');
});
「こんにちは」は印刷されません。
ドキュメントから:
セレクターが提供されている場合、イベントハンドラーは委任されたものと呼ばれます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫(内部要素)に対してのみ呼び出されます。jQueryは、イベントターゲットからハンドラーがアタッチされている要素(つまり、最も内側の要素から最も外側の要素)までイベントをバブルし、セレクターに一致するパスに沿ったすべての要素に対してハンドラーを実行します。
selector
括弧内のセレクターまたは関数$()
の2番目の引数を参照していますか?.on()
.on( events [, selector ] [, data ], handler(eventObject) )