Question

JQuery文档有关于.load（fn）（http://docs.jquery.com/Events/load#fn）的说法：

注意：加载仅在您设置时才有效它在元素完全之前加载，如果你在那之后设置它什么都不会发生。

那么当一个人应该绑定<div id="test">的加载事件时？据我所知，在这个div实际出现之前不会起作用，因为$（'＃test'）不会选择它，之后如上所述，这样做太晚了。以下代码似乎支持这一点：

<html>
<head></head>
<body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

   $('#test').load(function(event) { event.target.css('color', 'blue'); alert('a');});

</script>

<div id="test">TEST</div>

<script type="text/javascript"> 
   $('#test').load(function(event) { event.target.css('color', 'red'); alert('b');});
</script>


</body>
</html>

加载后没有任何反应（没有颜色变化，没有警报），Firebug表示一切正常。

Answer 1

load事件适用于异步加载的元素，例如images和ajax加载的内容。

静态内容无用。

在您的示例中，第一个load（）事件处理程序在定义#test元素之前绑定，因此它将不起作用。第二个load（）事件处理程序为时已晚，因为#test已经加载。

Answer 2

它可能在DOM准备好之前触发，因此#test div还不存在，尝试将其包装在$（document）.ready（...

中

应该看起来像：

$(document).ready(function(){
    $('#test').load(function(event) { event.target.css('color', 'blue'); alert('a');});
};)

Answer 3

只有窗口和图像可以从我看到的内容中触发加载事件。

$(function(){
  $("#test").css("color","blue");
});

Answer 4

如果我理解你的意图，你打算写的代码是：

$(function() {
  $('#test').css('color', 'blue');
  alert('a');
});

如果您希望#test元素在通过AJAX调用加载内容时执行某个功能，请尝试以下操作：

$(function() {
  $('#test').css('color', 'blue').load(function() {
    $('#test').css('color', 'red');
    alert('b');
  });
  alert('a');
});

如何使用jQuery的load（fn）方法，以便它实际工作

4 个答案: