如果无效用这个方法: on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

<div id="zkdiv">
 <input type="button" value="展开" id="zk" class="zk"/> <br>
</div>
$("#zkdiv").on("click",".zk",function(){
console.log("on 点击一次");
});
var html2 = "<input type='button' class='zk' value='新生成的展开' />";
$("#zkdiv").append(html2);

这样一来处理函数就绑定到#zkdiv的选择器上去了,事件冒泡导致的性能损失会大大降低(使用该方法时要确保.on前面的选择器能选择到对象 否则不起作用)

click是点击事件,但是在页面加载完之后,jquery事件新添加的元素,用click的话是无法获取元素的,这个时候要用on去获取元素事件,简单的说页面加载完成时候页面显示的元素可以用on,也可以用click,但是页面加载完成之后后期再追加的元素只能用on。

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

引用:https://www.jb51.net/article/146535.htm

jquery动态生成dom(比如append)导致js事件无效的更多相关文章

  1. 关于动态生成dom绑定事件失效的原因

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...

  2. Jquery 动态生成表单 并将表单数据 批量通过Ajax插入到数据库

    利用Jquery 动态生成 Table 表单 之后利用each 方法来遍历所有文本框获取文本的value值  并通过Ajax 将数据 提交到Web服务里把数据插入数据库 Html页面 <!DOC ...

  3. jQuery动态生成<select>下拉框

    前一阵在项目里需要动态生成下拉框,找了一下用jQuery实现比较方便,这里整理一下. 下文所述方法只是本人在项目中遇到问题的解决方法,场景较为简单,也希望能帮助有需要的朋友 1.动态生成下拉框的两种方 ...

  4. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

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

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

  6. jquery动态添加的元素不能直接应用事件方法的时候

    对于由 jQuery 动态生成的元素,如用 jQuery 给元素添加 class,或者直接添加一对 p 标签,不能直接绑定常用的事件,如 click.因为这些元素属于动态生成,除非采用 onclick ...

  7. jquery动态生成html代码绑定事件

    今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...

  8. jquery 动态生成html后click事件不触发原因

    转自:http://www.iam3y.com/html/560.html 最近在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<spa ...

  9. jquery动态生成二维码添加自定义logo

    动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...

随机推荐

  1. Ubuntu安装arm-linux-gcc 步骤

    文章目录 1.获取压缩包 2.解压 压缩包到指定路径 3.新建目录,解放目录权限 4.复制到新目录 5.配置环境变量和库变量 6.使用source命令重新加载生效该配置文件 7.验证 gcc编译的只能 ...

  2. Blazor Server 应用程序中进行 HTTP 请求

    翻译自 Waqas Anwar 2021年5月4日的文章 <Making HTTP Requests in Blazor Server Apps> [1] Blazor Server 应用 ...

  3. [总结&搬运]用户测试101

    原文地址:User Testing 101 可用性测试是什么? 可用性测试是一种非常流行的用户研究方式.在可用性测试环节中,通常由主持人.参与者和测试任务三部分组成.主持人会发布测试任务,要求参与者使 ...

  4. redisson 分布式加锁

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  5. 11.SpringMVC之HttpMessageConverter

    HttpMessageConverter简介 HTTP 请求和响应的传输是字节流,意味着浏览器和服务器通过字节流进行通信.但是,使用 Spring,controller 类中的方法返回纯 String ...

  6. 莫逸风CSDN文章目录

    『Ⅱ』-----随笔 莫逸风CSDN文章目录 The Programmer's Oath程序员的誓言-- 今天突发奇想写了一个小工具,CSDN文章目录生成器 vue去掉一些烦人的校验规则 输入npm ...

  7. Swagger2常用注解解析(轻松构建Swagger)

    Swagger2常用注解解析 一.SpringBoot集成Swagger2 二.常用注解解析 具体使用举例说明: 一.SpringBoot集成Swagger2 引入相关jar包 <!-- swa ...

  8. ProjectEuler 003题

    1 //题目:The prime factors of 13195 are 5, 7, 13 and 29. 2 //What is the largest prime factor of the n ...

  9. 用Java8把List转为Map

    1 import com.yang.test.User; 2 3 import javax.jws.soap.SOAPBinding; 4 import java.util.*; 5 import j ...

  10. OpenCV入门系列教学(三)绘制几何形状及添加文本

    一.绘制简单的几何形状和添加文本 opencv中绘制图形很简单,我们只需要使用下面这些常用函数即可. #画线 cv2.line() #画圆 cv2.circle() #画矩形 cv. rectangl ...