为什么添加的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.');
});
})
...全文
350 14 打赏 收藏 举报
写回复
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
  • 打赏
  • 举报
回复
文件如右图所示:
相关推荐

前端可视化软件guiplan教程,无论是懂前端还是不懂前端,都可以学会基本的布局操作。

全程都是可视化教学,自动生成代码。生成之后的代码符合w3c规范,除了学会软件的使用以外,我们还能学到前端html结构搭建,拖拽调整html结构,css常用样式可视化的配置,以及交互功能vue可视化配置,简单的代码编写以及可视化数据绑定,事件绑定等。

全程可视化编程,配置好之后效果立刻生效,同步更新,直接点击页面即可查看交互效果,更有利于减少研究成本与学习成本。

无论是制作静态html页面,还是动态的vue项目页面。都支持可视化布局,可视化拖拽,还支持可视化交互。

目前支持unipp与element-ui框架,支持可视化html元素操作,

支持可视化拖拽html元素结构,

支持一键添加html标签,

支持一键添加uniapp组件或element-ui组件,

支持可视化调整css样式,

支持可视化vue数据与方法创建,

支持可视化数据指令事件等一键绑定,

支持实时预览实时更新,

支持可视化交互测试修改之后直接点击预览页面即可测试,

支持一键生成代码html,css,js图片等

支持一键保存文件无论是静态html页面还是动态vue文件都能自动分类,自动存储。

支持手写代码与自动生成代码混合编写开发,比如添加过滤器filters,监听器watch等。

灵活便捷对程序员有好,是一款真正适合程序员开发的软件。

发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2015-07-13 01:19
社区公告
暂无公告