onclick-eventhandler中的"$(...).find(...)"

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

如果要使用事件委托,则第二个参数应该是选择器,而不是jQuery对象.

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

如果您不想使用事件委派,则需要调用on要挂起事件的元素:

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

这是所有覆盖的on文档.