「$（...）（...）を見つける。」onclickの-のEventHandler

Question

に私は私のページ内のボタンを取り扱うクリックでこのコードを使用しています：

$(document).on("click", $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection"), function (e) { 
     addItemToDocumentGrid(); 
     $('#removeDocumentFromSection').disable(true).addClass("disabled"); 
     $('#removeSelection').disable(true).addClass("disabled"); 
}); 

しかし、イベントが発生するなどすぐに私はページのどこかをクリックします。 $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection")で選択したいと思われるボタンではない場合でも。

$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection")は、実際に選択したいボタンである要素を返します。

なぜこのように動作しますか？

Answer 1

document要素にonClickイベントを添付しています。試してみてください：あなたはイベントの委任を使用する場合は、2番目の引数はセレクタ、ないjQueryオブジェクトでなければなりません

var button = $('#' + GlobalVariables.currentUserType).find(".addDocumentToSection"); 
button.on("click", function() { 
    addItemToDocumentGrid(); 
    $('#removeDocumentFromSection').disable(true).addClass("disabled"); 
    $('#removeSelection').disable(true).addClass("disabled"); 
}); 

Answer 2

。

$(document).on("click", '#' + GlobalVariables.currentUserType + " .addDocumentToSection", function (e) { 
// ---------------------^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
     addItemToDocumentGrid(); 
     $('#removeDocumentFromSection').disable(true).addClass("disabled"); 
     $('#removeSelection').disable(true).addClass("disabled"); 
}); 

あなたはイベントの委任を使用しない場合、あなたは上のイベントをフックする要素にonを呼び出す必要があります。これは、すべてのthe on documentationで覆われている

$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection").on("click", function (e) { 
     addItemToDocumentGrid(); 
     $('#removeDocumentFromSection').disable(true).addClass("disabled"); 
     $('#removeSelection').disable(true).addClass("disabled"); 
}); 

。

Answer 3

$('#' + GlobalVariables.currentUserType).find(".addDocumentToSection").on("click", function(e){ 

}); 

jQueryは.on("click"の前にセレクタを使用できますが、これはうまくいくはずです。