点击时jQuery在控制台中执行时有效,但在页面加载时无效

我在页面中使用以下jquery.

var j = jQuery.noConflict();
j(document).ready(function(){
    console.log(j("#label_19"));
    j("#label_19").on("click",function(){
        alert("Clicked");
    });
});

加载文档时,控制台中会显示元素(它是一个复选框).但是当我单击该复选框时,不会抛出警报.但是当我复制相同的代码(如下)

    j("#label_19").on("click",function(){
        alert("Clicked");
    });

在控制台面板和按下运行.现在,当我单击复选框时,会抛出警报.在这种情况下可能是什么问题？

更新:

我在控制台中观察到的是:

Object[input#label_19.document_label attribute value = "Check-In"]

HTML标记是

T.J. Crowder.. 8

符合您所提供事实的唯一解释是,在您的ready回调之后但在您单击替换相关元素的元素之前会运行代码.某种ajax回调或类似的.

您需要查看代码以找到发生这种情况的地方.要查找的内容是html对包含#label_19元素的元素的任何调用,或者(如果有jQuery和非jQuery代码的混合)分配innerHTML.

您可以使用事件委派来解决此问题,这可能是也可能不是最佳答案,具体取决于您的代码正在执行的操作.看起来像这样:

var j = jQuery.noConflict();
j(document).ready(function(){
    console.log(j("#label_19"));
    j(document).on("click", "#label_19", function(){ // This is the changed line
        alert("Clicked");
    });
});

在那里,我们不是挂钩click实际的元素,而是挂钩它document然后让jQuery告诉我们通过匹配我们在冒泡时给出的选择器的元素的点击.这样,事物正在破坏并重新创建#label_19元素并不重要,因为我们没有在该元素上挂钩处理程序.我们正在挂钩处理程序document并在事件发生时检查它是否通过了与该选择器匹配的内容.

但我不会盲目地使用事件委托,我会发现该元素真正发生了什么.