HTML中关于动态创建的标签无法绑定js事件的解决方法：.on()方法的 [.selector]
在前端页面的时候，会经常遇到用JavaScript动态创建出来的Button按钮或其他标签无法使用点击事件的问题。如下代码，使用jquery在body中动态创建一个class为demo的Button按钮，当点击这个按钮时无法触发点击事件。
<script>
$(function(){
$("body").html("<button class='demo'>按钮</button>");
$(".demo").click(function(){
alert("弹窗");
});
});
</script>
<body>
</body>
将以上代码中的 $(“.demo”).click(function(){………}); 修改为 $(document).on(“click”,”.demo”,function(){………})即可：
<script>
$(function(){
$("body").html("<button class='demo'>按钮</button>");
$(document).on("click",".demo",function(){
alert("弹窗");
});
});
</script> <body> </body>
此时事件冒泡到document对象上，当检测事件的target，如果与传入的选择符（这里是selector）匹配，就触发事件，否则不触发。
.on()方法的 [.selector]用法详情见：https://www.runoob.com/jquery/event-on.html
HTML中关于动态创建的标签无法绑定js事件的解决方法：.on()方法的 [.selector]的更多相关文章
- JavaScript动态创建script标签并执行js代码
<script> //创建一个script标签 function loadScriptString(code) { var script = document.createElement( ...
- 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具
很久以来,在写Html和JS时,经常会给超链接<a>标签,绑定JS事件. 我们经常看到这样的写法,<a href="javascript:;" onclick=& ...
- javascript动态创建script标签,加载完成后调用回调
代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...
- jquery 动态创建的元素，绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- Java中如何动态创建接口的实现
有很多应用场景,用到了接口动态实现,下面举几个典型的应用: 1.mybatis / jpa 等orm框架,可以在接口上加注解进行开发,不需要编写实现类,运行时动态产生实现. 2.dubbo等分布式服务 ...
- C# 中的动态创建技术
[转载]原文出处 http://blog.csdn.net/baiyun789/article/details/6156694 第一部分 WinForm控件在窗体中动态居中创建.删除控件及对其赋值 ...
- Python 中使用动态创建类属性的机制实现接口之后的依赖
我们在自动化测试中经常会需要关联用例处理,需要动态类属性: 推荐使用第二种方法: 创建:setattr() 获取:getattr() 两种,如何创建 类属性 loan_id # 第一种,创建 # 类名 ...
- ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
随机推荐
- 调用微信公众平台扫一扫示例及解决接口报错 { "errMsg": "config:invalid signature" }
一.解决报错问题 单从报错信息 invalid signature 就可以看出是 签名signature 有问题, 查了很多资料,终于知道了问题点, 后台让我直接调接口是不对的,签名是根据请求接口的页 ...
- mybatis 的 <![CDATA[ ]]> 标签作用
有个细节一直没有注意到,今天mark一下: mybatis进行时间比较的时候我们会这么写,一直都是在复制粘贴所以没有注意,一个标签<![CDATA[ ]]> 今天在做另外一个有时间比较sq ...
- 【转】地球坐标系 (WGS-84) 到火星坐标系 (GCJ-02) 的转换算法 C#
// // Copyright (C) 1000 - 9999 Somebody Anonymous // NO WARRANTY OR GUARANTEE // using System; name ...
- osg fbx 模型结构操作
osg::Node* TeslaManage::findOsgNodeByName(QString &nodeNme) { osg::Node* findNode = NULL; std::v ...
- JavaScript——closures(待续)
问答原文:How do JavaScript closures work?
- 设置滑动TabBar的显示和隐藏
代码如下: //设置滑动的判定范围 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint ...
- shell脚本安装python、pip--交互式的
首先把pip-.tgz 安装包放在 /usr/local 下面,按照顺序先安装pip,再安装python.不要先安装或只安装python,否则很容易出错, [root@bogon ~]# cat pi ...
- redis列表和有序集合
redis中的list数据类型是可以插入重复数据的,有去重的需求的话可以用redis有序集合数据类型 Redis Zadd 命令用于将一个或多个成员元素及其分数值加入到有序集当中. 如果某个成员已经是 ...
- mysql使用truncate截断带有外键的表时报错--解决方案
报错内容如:1701 - Cannot truncate a table referenced in a foreign key constraint 一.为什么要使用truncate 使用trunc ...
- 第二十章 无状态Web应用集成——《跟我学Shiro》
目录贴:跟我学Shiro目录贴 在一些环境中,可能需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时带上相应的用户名进行登录.如一些REST风格的AP ...