イベントの伝播は、子要素から親要素に発生しています。
最初の行が子divのクリックを処理しているように見えるかもしれませんが、指定した方法で実際にドキュメントレベルのクリックが処理され(セレクターがであるため$(document)
)、子divで発生した場合にのみメソッドが呼び出されます(on('click','#addCompany_map'
部)。ドキュメントはaddCompaniesModal
divの親であるため、クリックハンドラーはdivで使用されたものの後に起動しますaddCompaniesModal
。
これを機能させるには、コードを次のように変更する必要があります。
$('#addCompany_map').click(function (e) {
e.stopPropagation();
});
$('#addCompaniesModal').click(function(){
});
編集:
いくつかのコメントで、$(document).on('click', ...
アプローチを使用している主な理由は、子divを動的に追加しているためであることがわかりました。
その場合、問題を処理するための2つの実行可能なアプローチがあります。
最初のアプローチは、子divハンドラーも動的に追加し、削除時にバインドを解除することです。このアプローチを使用できます。
function dynamicallyAddChildren(){
var oldChildDiv = $('#addCompany_map');
if (oldChildDiv.length > 0)
oldChildDiv.off('click', handleChildDiv);
// remove old child if needed and add new child divs
newChildDiv.on('click', handleChildDiv);
}
function handleChildDiv(e){
//do something
e.stopPropagation();
}
$('#addCompaniesModal').click(function(){
});
$(document).on('click', ...
2番目のアプローチは、次のように子と親の両方のdivでアプローチを使用することです。
$(document).on('click','#addCompany_map', function (e) {
e.stopPropagation();
});
$(document).on('click','#addCompaniesModal', function(){
});