为什么添加的HTML元素又消失了???

comeon_0001 2015-07-13 01:19:09
问题如图片:


<!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.');
});
})
...全文
388 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
slwsss 2015-07-13
  • 打赏
  • 举报
回复
怎么方便怎么写
引用 13 楼 comeon_0001 的回复:
comeon_0001 2015-07-13
  • 打赏
  • 举报
回复
引用 12 楼 slwsss 的回复:
性能差不了多少的 $('#test').html($('<a href="#" id="clickme">testbutton</a>').click(function(){alert()}));
这相当于给添加的HTML元素添加了click事件对吧??? 在您看来这两种方法哪一个方法写的比较好?
slwsss 2015-07-13
  • 打赏
  • 举报
回复
性能差不了多少的 $('#test').html($('<a href="#" id="clickme">testbutton</a>').click(function(){alert()}));
comeon_0001 2015-07-13
  • 打赏
  • 举报
回复
引用 10 楼 slwsss 的回复:
可以这样理解 将事件绑定在已存在的元素(body)上,触发事件(这个和绑定的方法不是同一个)时查找与事件对应的元素匹配就调用
谢谢您耐心的讲解,还有其它方法吗? 这样是不是开销比较大?
slwsss 2015-07-13
  • 打赏
  • 举报
回复
可以这样理解 将事件绑定在已存在的元素(body)上,触发事件(这个和绑定的方法不是同一个)时查找与事件对应的元素匹配就调用
comeon_0001 2015-07-13
  • 打赏
  • 举报
回复
引用 8 楼 slwsss 的回复:
页面上不存在clickme能绑定成功吗 http://www.runoob.com/jquery/event-on.html
为什么绑定到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
  • 打赏
  • 举报
回复
引用 6 楼 slwsss 的回复:
$('body').on('click','#clickme', function() { alert('I am be clicked.'); }); })
为什么要绑定到body上啊,大神?
slwsss 2015-07-13
  • 打赏
  • 举报
回复
$('body').on('click','#clickme', function() { alert('I am be clicked.'); }); })
comeon_0001 2015-07-13
  • 打赏
  • 举报
回复
引用 2 楼 slwsss 的回复:
<a href="#" id="AddButton">AddButton</a> $('#test').html('<a href="#" id="clickme">testbutton</a>');
问题是这样的。 但是虽然html元素被添加到页面了,但是下面这个事件还是不会被执行,不是用on就可以吗??? $('#clickme').on('click', function() { alert('I am be clicked.'); });
comeon_0001 2015-07-13
  • 打赏
  • 举报
回复
引用 3 楼 vblj862679691 的回复:
那是因为你的a href="", href的值是空,点击的时候会刷新页面。你把a href=""改成 a href="javascript:;"
貌似去除“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
  • 打赏
  • 举报
回复
文件如右图所示:

87,884

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧