在前端页面的时候，会经常遇到用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]的更多相关文章

  1. JavaScript动态创建script标签并执行js代码

    <script> //创建一个script标签 function loadScriptString(code) { var script = document.createElement( ...

  2. 超链接标签绑定JS事件&&不加"javascript:;"导致的杯具

    很久以来,在写Html和JS时,经常会给超链接<a>标签,绑定JS事件. 我们经常看到这样的写法,<a href="javascript:;" onclick=& ...

  3. javascript动态创建script标签,加载完成后调用回调

    代码如下: var head = document.getElementsByTagName('head')[0]; var script = document.createElement('scri ...

  4. jquery 动态创建的元素，绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  5. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  6. Java中如何动态创建接口的实现

    有很多应用场景,用到了接口动态实现,下面举几个典型的应用: 1.mybatis / jpa 等orm框架,可以在接口上加注解进行开发,不需要编写实现类,运行时动态产生实现. 2.dubbo等分布式服务 ...

  7. C# 中的动态创建技术

    [转载]原文出处  http://blog.csdn.net/baiyun789/article/details/6156694 第一部分 WinForm控件在窗体中动态居中创建.删除控件及对其赋值 ...

  8. Python 中使用动态创建类属性的机制实现接口之后的依赖

    我们在自动化测试中经常会需要关联用例处理,需要动态类属性: 推荐使用第二种方法: 创建:setattr() 获取:getattr() 两种,如何创建 类属性 loan_id # 第一种,创建 # 类名 ...

  9. ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

随机推荐

  1. 咏南中间件和开发框架全面支持DELPHI10.3.2

    咏南中间件和开发框架全面支持DELPHI10.3.2 易博龙公司2019年7月12日发布了RAD STUDIO10.3.2正式版本. 咏南中间件自2019年7月14日始,中间件.CS框架.WEB框架. ...

  2. 目录：JAVA

    收藏: Java:类与继承

  3. matlab将多张图片合成视频

    文件夹内多张图合成为视频: route='D:\文件及下载相关\桌面\**\Matlab_code\result';%基本路径 %d=dir([route '\*.bmp']);%.jpg格式 Wri ...

  4. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_04-用户认证-认证服务查询数据库-查询用户接口-接口开发

    定义dao 权限放在授权的课程里面做,现在先不管.我们还需要查企业信息,就是用户所属的公司 公司表 对应关系在xc_company 这是一个关系 表 这个表里有唯一索引 user_id 所以根据use ...

  5. 怎样提交社区项目Karbor的Bug?

    1.登录社区Karbor Launchpad地址: https://bugs.launchpad.net/karbor/+filebug 输出bug简介,点击Next按钮. 2.填写Bug描述,完成B ...

  6. 123457---com.twoapp.shuXueYouXi---小学数学口算

    com.twoapp.shuXueYouXi---小学数学口算

  7. python基础之面向对象(二)

    一点提醒 首先在使用pickle读取load时,需要先把使用到的类import上,否则会报错.在pycharm中使用时不会报错,但在linux或者cmd时就会报错!必须import. 报错提示: Fi ...

  8. Linux配置代理IP

    Linux配置代理IP: vim /etc/profile http_proxy=http://username:password@ip:port/ https_proxy=http://userna ...

  9. 02. oc语言是动态语言

    参照着知乎上大神们给的解释,(https://www.zhihu.com/question/19918532)自己要总结下知识: 自己初级并没有理解 动态.静态.强类型.弱类型 语言的这些含义,区分. ...

  10. 单点登录系统（SSO）详细设计说明书（上篇）

    1.引言 1.1编写目的 为了单点登录系统(SSO系统)的可行性,完整性,并能按照预期的设想实现该系统,特编写需求说明书.         同时,说明书也发挥与策划和设计人员更好地沟通的作用. 1.2 ...