Jquery 事件仅在文档就绪时工作答案

【问题标题】：Jquery events working only in document readyJquery 事件仅在文档就绪时工作
【发布时间】：2012-12-22 05:21:00
【问题描述】：

我用 .net MVC 3 开始了一个小网络项目。我的问题：我包括了 Jquery 1.8.3.js。但是我的函数在 javascript 文件中不起作用：

这不起作用：

$(document).ready(function() {
    $('input:button').button();
});

$('#testbut').on('click', function (event, ui) {

    alert("CLICK");

});

这仍然工作正常：

$(document).ready(function() {
    $('input:button').button();

    $('#testbut').on('click', function (event, ui) {

    alert("CLICK");

    });
});

我不知道为什么。

包含的顺序正确。

【问题讨论】：

为什么不使用有效的？它之所以有效，是因为您必须等待元素存在才能尝试选择它。

标签： jquery events document ready

【解决方案1】：

第一个示例失败，因为代码在页面加载时正在执行，并且它引用的元素尚未加载。这也是第二个示例起作用的原因。

通过将您的代码放在文档就绪块中，它会在页面加载之前推迟执行它。

【讨论】：

【解决方案2】：

当您将代码块放入$(document).ready() 时，它会在文档加载后等待将侦听器附加到目标。因此，在您的第一个示例中，jquery 附加了侦听器$('#testbut').on('click', function (event, ui) {，但 DOM 尚未加载该元素。在第二个示例中，它仅在加载文档后附加侦听器。

【讨论】：