87,955
社区成员
发帖
与我相关
我的任务
分享为什么添加的HTML元素又消失了？？？
问题如图片：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="" id="AddButton">AddButton</a>
<div id="test">
</div>
<!--<script src="zepto.js"></script>-->
<script src="jquery-2.1.4.js"></script>
<script src="test.js"></script>
</body>
</html>
$(document).ready(function(){
$('#AddButton').click(function() {
[color=#FF0000]$('#test').html('<a href="" id="clickme">testbutton</a>');
问题：这里的click事件执行完，动态添加的HTML元素又消失了，Why???
是因为Jqeury的事件机制吗？ 怎么样让它一直存在？
[/color]
});
$('#clickme').on('click', function() {
alert('I am be clicked.');
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="" id="AddButton">AddButton</a>
<div id="test">
</div>
<!--<script src="zepto.js"></script>-->
<script src="jquery-2.1.4.js"></script>
<script src="test.js"></script>
</body>
</html>
$(document).ready(function(){
$('#AddButton').click(function() {
[color=#FF0000]$('#test').html('<a href="" id="clickme">testbutton</a>');
问题：这里的click事件执行完，动态添加的HTML元素又消失了，Why???
是因为Jqeury的事件机制吗？ 怎么样让它一直存在？
[/color]
});
$('#clickme').on('click', function() {
alert('I am be clicked.');
});
})
...全文
请发表友善的回复…
发表回复
slwsss 2015-07-13
- 打赏
- 举报
怎么方便怎么写
comeon_0001 2015-07-13
- 打赏
- 举报
这相当于给添加的HTML元素添加了click事件对吧？？？
在您看来这两种方法哪一个方法写的比较好？
slwsss 2015-07-13
- 打赏
- 举报
性能差不了多少的
$('#test').html($('<a href="#" id="clickme">testbutton</a>').click(function(){alert()}));
comeon_0001 2015-07-13
- 打赏
- 举报
谢谢您耐心的讲解，还有其它方法吗？ 这样是不是开销比较大？
slwsss 2015-07-13
- 打赏
- 举报
可以这样理解
将事件绑定在已存在的元素（body）上，触发事件（这个和绑定的方法不是同一个）时查找与事件对应的元素匹配就调用
comeon_0001 2015-07-13
- 打赏
- 举报
为什么绑定到body就可以？？？
是因为body存在，然后事件又冒泡给了“<a href="#" id="clickme">testbutton</a>'”元素？？？
slwsss 2015-07-13
- 打赏
- 举报
页面上不存在clickme能绑定成功吗
http://www.runoob.com/jquery/event-on.html
comeon_0001 2015-07-13
- 打赏
- 举报
为什么要绑定到body上啊，大神？
slwsss 2015-07-13
- 打赏
- 举报
$('body').on('click','#clickme', function() {
alert('I am be clicked.');
});
})
comeon_0001 2015-07-13
- 打赏
- 举报
问题是这样的。
但是虽然html元素被添加到页面了，但是下面这个事件还是不会被执行，不是用on就可以吗？？？
$('#clickme').on('click', function() {
alert('I am be clicked.');
});
comeon_0001 2015-07-13
- 打赏
- 举报
貌似去除“href”属性也可以，但是a就不是超链接了。 如果用a做按钮，可以去除href吗？
vblj 2015-07-13
- 打赏
- 举报
那是因为你的a href="", href的值是空，点击的时候会刷新页面。你把a href=""改成 a href="javascript:;"
slwsss 2015-07-13
- 打赏
- 举报
<a href="#" id="AddButton">AddButton</a>
$('#test').html('<a href="#" id="clickme">testbutton</a>');
comeon_0001 2015-07-13
- 打赏
- 举报
文件如右图所示：
