今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题:

使用append动态生成的元素事件绑定失效了。

查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而新添加的元素自然没有绑定到事件。

解决方案1:

单独为新添加的元素绑定事件,显然这样的操作存在代码冗余,不够简洁,这时我们可用看一看第二种解决方案。

解决方案2:

使用$(document).on('事件类型','要选择的元素',function(){})方法为元素绑定事件
   
 on方法包含很多事件,点击,双击等等事件。与click(fn)相比,二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。

这样动态元素的事件绑定问题就可以解决了。

append动态生成的元素,无法触发事件的原因及解决方案的更多相关文章

  1. append()方法生成的元素绑定的事件失效解决办法

    我使用append()方法动态生成的a链接的click事件没有起效果,查找了资料,了解到,我使用的onclick方法绑定的事件对动态生成的元素是无效的,解决办法如下: 使用事件委托,并且要用on来绑定 ...

  2. js动态追加的元素如何触发事件

    一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...

  3. JQ动态生成的元素,原事件绑定失效

    Old Code: $('code').click(function () { console.log($(this).text()); }); New Code:(.container 是<c ...

  4. Angular如何给动态生成的元素绑定事件

    在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...

  5. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  6. jQuery对于动态生成的元素绑定无效的问题~~

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  7. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  8. jquery给动态生成的元素绑定事件,on函数

    首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...

  9. jquery动态生成的元素添加事件的方法

    动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...

随机推荐

  1. echart--如何将echart的配置项,放到webpack中(CHARTTEMPLATE时)

    1.假如,我们已经写好了组件,我们需要把它放入到一个环境中去 2.首先在index.html中,我们需要写一个dom结构 3.新建一个,chart.js文件(这个里面放组件的代码) 1>开始创建 ...

  2. Math.min() Math.max() Math.min().apply() Math.max() .apply()该如何使用???

    Math.min()和 Math.max()  语法: Math.min(x,y) Math.max(x,y) 虽然能取到最小值和最大值,但是不支持数组. 那么如何计算数组中的大小值呢???????? ...

  3. 【Java】JavaMail使用网易企业邮箱发邮件

    邮件发送器 /** * 邮件发送器 * * @author Zebe */ public class MailSender implements Runnable { /** * 收件人 */ pri ...

  4. Mysql索引深入理解

    一.  引言 Mysql 我们平常用的很多,了解的很多,今天别的不说,直接说mysql的底层是什么,说到底层,就想到数据结构,那么,mysql的数据结构是什么呢? 是B + tree .那么数据库中的 ...

  5. android 摇一摇功能的实现

    将这个功能封装成了一个类,这样今后方便调用 package com.bobo.myyaoyiyaotest; import android.R.bool; import android.content ...

  6. Web开发系列【1】实用的网页布局(PC端)

    在熟悉那些常用的软件.工具后,我们正式开始开发,在前期准备工作之后,我们要做的事情是写页面,也就是网页布局.在w3c.菜鸟.慕课网等等网站上都有基础的 HTML+CSS 知识讲解,在初期学习中,跟着教 ...

  7. 北风设计模式课程---开放封闭原则(Open Closed Principle)

    北风设计模式课程---开放封闭原则(Open Closed Principle) 一.总结 一句话总结: 抽象是开放封闭原则的关键. 1."所有的成员变量都应该设置为私有(Private)& ...

  8. C++返回栈上的数组(局部变量)问题探索

    char* teststr() { char s[] = "hello"; return s; } void main() { char* str = teststr(); ]; ...

  9. centos 7 安装Telnet并设为开机自启动、开防火墙端口

    [root@b ~]# rpm -qa | grep telnettelnet-0.17-64.el7.x86_64telnet-server-0.17-64.el7.x86_64[root@b ~] ...

  10. DSP处理器和ARM处理器的区别以及各自应用在那些领域

    由于工作经常接触到各种多核的处理器,如TI的达芬奇系列芯片拥有1个DSP核3个ARM核.那么DSP处理器和ARM处理器各自有什么区别,各自适合那些领域? DSP:digital signal proc ...