7.3.3 快速上手
使用普通的方法给元素绑定一个单击事件,代码如下:
node2:/var/www/html/jquery/aa#cat a13.html
$('a').click(function(){
alert('aa');
});
这样写法可以为页面上已经存在的超链接元素绑定单击事件,但是通过JavaScript 方法动态加载的内容中的
超链接元素则不会被绑定单击事件。
此时,可以使用livequery插件，无论这些元素是页面上本身已经存在的,还是后来通过JavaScript方式动态加载的,
都会被绑定上单击事件 代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jquery-2.2.2.min.js" type="text/javascript"></script>
<script src="jquery.livequery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').livequery('click',function(){
alert('livequery导致的点击');
return false;
});
$("body").append('<p><a href="#">超链接B</a>');
$("body").append('<p><a href="#">超链接C</a>');
});
</script>
</head>
<body>
<a href="#">超链接A</a>
</body>
</html>
调整为:
node2:/var/www/html/jquery/aa#cat a13.html
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jquery-2.2.2.min.js" type="text/javascript"></script>
<script src="jquery.livequery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
alert('livequery导致的点击');
return false;
});
$("body").append('<p><a href="#">超链接B</a>');
$("body").append('<p><a href="#">超链接C</a>');
});
</script>
</head>
<body>
<a href="#">超链接A</a>
</body>
</html>
此时点击:
超链接A
超链接B
超链接C
点击 超链接B 和 超链接C 没有任何反应
运行代码后,可以发现,新添加到文档中的超链接元素也被绑定了单击事件