在前端页面的时候，会经常遇到用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. Java 面向对象（五）

    包装类 什么是包装类 在面向对象当中"一切皆对象".基本数据类型变量不是对象,比如 int a = 10; 当中就没有对象,所以就很矛盾.此时我们就可以对基本数据类型进行包装,把基 ...

  2. 关于Scanner调用 sc.nextInt() 异常try后不能二次输入导致死循环问题

    先看下简化的代码,引出问题所在: public class Run { public static void main(String[] args) { Scanner sc = new Scanne ...

  3. MySQL数据库可以用任意ip连接访问的方法

    > use mysql; > update user set host='%' where host='localhost'; > flush privileges;

  4. Python日志库logging总结-可能是目前为止将logging库总结的最好的一篇文章

    在部署项目时,不可能直接将所有的信息都输出到控制台中,我们可以将这些信息记录到日志文件中,这样不仅方便我们查看程序运行时的情况,也可以在项目出现故障时根据运行时产生的日志快速定位问题出现的位置. 1. ...

  5. MIPS 指令集(共31条）

    MIPS 指令集(共31条) MIPS 指令集(共31条) 助记符 指令格式 示例 示例含义 操作及其解释 Bit # 31..26 25..21 20..16 15..11 10..6 5..0 R ...

  6. 安装git和关联gitlab拉取代码步骤

    1.双击 “Git-2.9.2-64-bit.exe”文件,一路next安装git程序 2.为github帐号添加SSH keys 3.使用git clone命令从GitLab上同步代码库时,如果使用 ...

  7. 多线程分页处理批量数据--jdbc方式

    /** * 同步数据信息到ES * @return */ public boolean syncNhReportSeessToEs(){ long begin = System.currentTime ...

  8. 123457123457---com.threeObj03.MaJiangertong--- 记忆翻牌益智游戏

    com.threeObj03.MaJiangertong--- 记忆翻牌益智游戏

  9. java cpu 使用率100%

    --宝典开始 top :查看 进程 ,选CPU使用率高的 获取进程ID,pid top -Hp pid:查看线程,选CPU使用率高的 获取线程ID,threadid printf "%X\n ...

  10. （五）AJAX技术

    一.定义 AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的 ...