代码:
<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
解决方案 »
- 谁有类似这样的网页播放器
- JS字符串截取问题
- 谁能详细介绍下 this.initialize.apply(this, arguments);
- 原始文件已经修改,但是刷新链接没有效果
- 动态生成的文本框中有个onchange事件,使用时onchange事件为什么无效?有答案马上结贴!!!
- 请问下面的代码为何可作能达到双线,那位解释一下?
- 在网页中如何用javascript来判断我点了右键
- 如何动态放大/缩小整个页面的字号及间距
- 怎么给 form动态加入字段?
- 如何解决程序修改文本框值,不触发onchange事件的问题?
- 值班系统js功能代码问题及思路
- IE解析JSON报错,缺少 ']',chrome 浏览器正常
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事件。