Question

我在页面中使用以下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标记是

<input id="label_19" class="document_label" type="checkbox" value="Check-In" name="label[19]">

Answer 1

符合您所提供事实的唯一解释是，在您的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上挂钩处理程序，并在事件发生时检查它是否通过了与该选择器匹配的内容。

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

Answer 2

在没有看到其余代码（包括HTML和相关DOM元素）的情况下，您是否考虑过使用j(window).load()代替j(document).ready()

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

正如here所说：

完整页面完全加载后，窗口加载事件会稍后执行，包括所有帧，对象和图像。因此，涉及图像或其他页面内容的函数应放在窗口或内容标记本身的加载事件中。

Answer 3

我有一个类似的问题，它在我把它包装在window.load中后得到了解决。

(function ($) {
    $(window).on('load', function () {
        //MY click calls inside here
    });    
})(jQuery);

希望它有所帮助！

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

更新

3 个答案: