Question

有人可以告诉我为什么我不能单独添加处理程序，而是我必须做类似下面的操作才能使它工作？

我的问题是为什么我应该在<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ alert('test'); }); </script> <script> $("p").click(function(){ $(this).hide(); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>中添加用于隐藏段落的代码以使其正常工作。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>

工作代码 -

{{1}}

Answer 1

第一个代码段中的问题是在加载文档之前注册的jQuery代码，因此它不会识别任何HTML元素。因此它不起作用。

<强> 解决方案： -

1.将您的代码放在页面底部（如果是第一个）。

2.或者将您已经完成的代码（$(document).ready(function(){..});）包装在第二个代码中。

在上述两种情况下，HTML元素都正确加载并在jQuery代码之前注册，因此您的代码将开始工作

Answer 2

将其更改为以下内容..

＆＃13;

$(document).ready(function(){
    alert('test');
    $("p").click(function(){
        $(this).hide();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

＆＃13;

Answer 3

只有在页面中解析了所有$(documet).ready(function(){})后，

DOM elements才会执行，无论其位置如何。当您编写没有就绪功能的代码时，代码将按顺序执行。如果javascript代码放在DOM元素外观之前，它将无法工作。如果你放置（第一种情况） -

<script>
$("p").click(function(){
    $(this).hide();
});
</script>

在body标签之前，它将按预期工作 - 确保在页面中解析的所有DOM元素都使用$(documet).ready(function(){})。

Answer 4

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码调用“点击”按钮时处理程序。

您可以通过以下方式实施它：

将脚本包含在HTML正文的末尾，这始终是最佳做法。
将处理代码包装到函数中，并在 document.ready（）或 body.onload（）中调用该函数。 document.ready（）是首选，因为它不会等待图像之类的资源，并在加载HTML内容后立即附加事件。
使用委派事件来附加事件处理程序。委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

我会这样做：

＆＃13;

(function(){
  $('p').on('click',function(){
    $(this).hide();
  });
})();

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    alert('test');
});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

<script src=""></script>
</body>
</html>

＆＃13;

将事件添加到jQuery

4 个答案: