Question

我用.net MVC 3开始一个小小的web项目。我的问题：我包括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");

    });
});

我不明白为什么。

包含的顺序正确。

Answer 1

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

通过将代码放在文档就绪块中，它会暂停执行它直到页面加载完毕。

Answer 2

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

Jquery事件仅在文档就绪时起作用

2 个答案: