在前端页面的时候，会经常遇到用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. boost 介绍

    简介: Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有望成为下一代C++标准库内容 ...

  2. 制作A4纸打印的网页像素大小设置(转)

    公司内做系统,要用A4纸打印东西,A4纸标准时mm,换算成像素不知道.网上找找,找到一篇文章,转一下,备用. A4纸的尺寸是210mm*297mm,也就是21.0cm*29.7cm,而1英寸=2.54 ...

  3. python -- 安装+pip+requests

    python3 安装库 sudo python3 -m pip install beautifulsoup4   步骤1:安装pyenv 为了能顺利的将系统的python和下载的python版本呼唤, ...

  4. xgboost 源码学习

    官方代码结构解析,README.MD XGboost 回归时,损失函数式平方误差损失 分类时,是对数自燃损失: Coding Guide ====== This file is intended to ...

  5. [Java]在JAVA中使用Oracle的INSERT ALL语法进行批量插入

    Oracle也提供了类似MySQL的批量插入语法,只是稍微别扭些,具体代码如下: package com.hy; import java.sql.Connection; import java.sql ...

  6. NTC热敏电阻基础以及应用和选择（转）

    源:NTC热敏电阻基础以及应用和选择 NTC被称为负温度系数热敏电阻,是由Mn-Co-Ni的氧化物充分混合后烧结而成的陶瓷材料制备而来,它在实现小型化的同时,还具有电阻值-温度特性波动小.对各种温度变 ...

  7. keras Model 3 共享的层

    1 入门 2 多个输入和输出 3 共享层 考虑这样的一个问题:我们要判断连个tweet是否来源于同一个人. 首先我们对两个tweet进行处理,然后将处理的结构拼接在一起,之后跟一个逻辑回归,输出这两条 ...

  8. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_08-用户认证-认证服务查询数据库-用户登录前端

    点击登陆注册链接 跳转到登陆的页面 门户的前端代码 当前路径base64编码 登陆的表单,在学习中心的前端. 这就是登陆的表单 这是表单的校验 请求服务端的接口 登陆请求的方法 请求的地址nginx上 ...

  9. java生成RSA公私钥字符串，简单易懂

    java生成RSA公私钥字符串,简单易懂   解决方法: 1.下载bcprov-jdk16-140.jar包,参考:http://www.yayihouse.com/yayishuwu/chapter ...

  10. 《海会圣贤》高清字幕版（由香港佛陀教育协会发布DVD恭敬转成）

    常念阿彌陀佛 2015-09-22 视频(建议WIFI下收看)时长72分钟 https://v.qq.com/x/page/f0166amk57h.html 香港佛陀教育协会发布DVD   DVD+高 ...