代码:
<html>
<head>
<title>Have a try</title>
</head>
<script src="jquery-1.8.3.js"></script>
<script>
$(function(){
$("#button_1").click(function(){
$("#div_1").html("<button class='panel'>ki</button>");
});
$(".panel").click(function(){
alert("it works!");
});
});
</script>
<body>
<button id="button_1">Hi</button>
<div id="div_1"></div>
</body>
</html>
我知道这个代码无法运行,而且也知道怎样改写能让这些代码好使,比如改写成:
$(function(){
$("#button_1").click(function(){
$("#div_1").html("<button class='panel'>ki</button>");
$(".panel").click(function(){
alert("it works!");
});
});
});
或
...
$("#div_1").html("<button class='panel'>ki</button>");
$(".panel").click(run());
...
function run(){alert();}
但问题是,我就想知道,为什么第一种写法无法触发
$(".panel").click(function(){alert("it works!");});
也就是说:用jQuery/JS动态载入新的元素,无法触发已有代码中对这些新载入元素的相应处理代码。因为这些script代码在页面加载时已经被浏览器获取了,为何没有效果,我始终想不明白。
所以跪求解释,如果解释得透彻一些,或者启发、点拨,都十分感谢javascriptjquery
<html>
<head>
<title>Have a try</title>
</head>
<script src="jquery-1.8.3.js"></script>
<script>
$(function(){
$("#button_1").click(function(){
$("#div_1").html("<button class='panel'>ki</button>");
});
$(".panel").click(function(){
alert("it works!");
});
});
</script>
<body>
<button id="button_1">Hi</button>
<div id="div_1"></div>
</body>
</html>
我知道这个代码无法运行,而且也知道怎样改写能让这些代码好使,比如改写成:
$(function(){
$("#button_1").click(function(){
$("#div_1").html("<button class='panel'>ki</button>");
$(".panel").click(function(){
alert("it works!");
});
});
});
或
...
$("#div_1").html("<button class='panel'>ki</button>");
$(".panel").click(run());
...
function run(){alert();}
但问题是,我就想知道,为什么第一种写法无法触发
$(".panel").click(function(){alert("it works!");});
也就是说:用jQuery/JS动态载入新的元素,无法触发已有代码中对这些新载入元素的相应处理代码。因为这些script代码在页面加载时已经被浏览器获取了,为何没有效果,我始终想不明白。
所以跪求解释,如果解释得透彻一些,或者启发、点拨,都十分感谢javascriptjquery
live()给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的也有效。
$("#button_1").click(function(){
//因为下面这句话是在你点击了button_1之后才会向页面添加panel,
$("#div_1").html("<button class='panel'>ki</button>");
});
//而当这句话被执行的时候,你还没有点击button_1,所以页面上这时通过$('.panel');选择器还选择不到panel,$('选择器')默认是在整个页面上选择元素,除非$('选择器',context);
$(".panel").click(function(){
alert("it works!");
});
});
$('.panel').live('click',function(){
// dosth
})
在doc中会做类似这种操作
$(document).click(function(e){
var $target = $(e.target);
if ($targe.attr('class') === 'panel'){
fn.call($targe);
}
})所以当你给a元素live了事件,但是如果你在a元素的父元素b中相同的事件做了return false(阻止冒泡的动作),live就失效了,这是因为事件没有冒泡到doc中去
第二种实在.panel生成后再绑定
$(function(){
$("#button_1").click(function(){
$("#div_1").html("<button class='panel'>ki</button>");
$(".panel").bind("click",function(){alert("it works!");});
});
});
当你触发button_1事件后,添加了元素同时也给这个元素绑定了click事件。