append方法添加的元素不能绑定事件

2024-11-04

append动态生成的元素，无法触发事件的原因及解决方案

今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题: 使用append动态生成的元素事件绑定失效了. 查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn.只针对与页面已存在的选择器.而新添加的元素自然没有绑定到事件. 解决方案1: 单独为新添加的元素绑定事件,显然这样的操作存在代码冗余,不够简洁,这时我们可用看一看第二种解决方案. 解决方案2: 使用$(document).on('事件类型','要选择的元素',function(){})方法为元素绑定事件

append 添加的元素重新绑定事件

在jQuery当中append是动态向页面中添加元素的常见方法,但是很多时候append添加之后的节点再次绑定事件(比如click)的时候,就会发现click失效,这时候就会涉及到,on() 高版本的jQuery中.on()启用之后bind和live都已经失效. 再说上面的问题,如$(".DIV").append("<li>123</li>"),这时候用$(".DIV").click()方法绑定就会发现click事件没有绑

js动态添加的元素不能绑定事件

动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})

jq动态添加的元素触发绑定事件无效

<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(".b").click(function(){})方法失效原来jq中动态添加的元素不能直接使用$(".b").click(function(){});的方法,要使用$(".a").on('click','.b',function(){}); $(&quo

【jquery】在异步加载的元素上绑定事件

最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前端开发使用了jquery 和 artTemplate技术,其中经常要通过artTemplate的template.compile()方法来实现像是向下滚动鼠标动态加载后续分页的内容并显示在页面上这样的效果. 在jquery官网上关于事件绑定和事件委托的4个方法中有这样的介绍: live():jQue

jquery append 动态添加的元素绑定事件on

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 具体不多说了,请看下面的代码吧. <!DOCTYPE html"> <html> <head> <meta charset=UTF-8"> <title>测试</title> <script type=&

[转]jquery append 动态添加的元素事件on 不起作用的解决方案

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 具体不多说了,请看下面的代码吧. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

jquery append 动态添加的元素事件on 不起作用的解决方案

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 通俗的说就是在谁上面append就用谁做父级. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

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

今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // 所有的X; var Ojiaru = $('.detright div.duibi div.duibox div.tiao li button'); // 添加新车对比按钮 OaddX.on('click',function(){ var OspanX = $('.detright div.duib

用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <h

JQ绑定事件（1.9已经废除了live()等绑定事件方法，on()方法是官方推荐的绑定事件的一个方法）

本文来源:http://www.cnblogs.com/leejersey/p/3545372.html jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() $("p").bind("click",function(){ alert("The paragraph was clicked.&q

获取器操作都是针对数据而不是数据集的，要通过append()方法添加数据表不存在的字段

获取器操作都是针对数据而不是数据集的,要通过append()方法添加数据表不存在的字段 public function getMembership(){ //加入会员s_id = 1 $business = BusinessModel::getMembership(); if(!$business){ throw new BusinessException([ 'msg'=>'加入会员业务不存在或已禁用' ]); } $business->append(['cate_name','',''])

jquery append 动态添加的元素事件on 不起作用问题的解决

on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete). 不多说看成功代码(注意加粗加色): <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type

解决jquery新加入的元素没有绑定事件问题

在使用jquery操作时,往往需要动态的添加一些元素,但是这些新加入的元素并没有像css那样被赋予原本定义的样式,解决方法如下: 1.动态插入元素后,并用bind事件给新加入的元素绑定事件. 2.如果使用的是jquery 1.8以下的版本,可以使用live()方法进行绑定. $(function(){ $("a").live("click", function(){ alert("ok"); }); }); 3.使用on()方法来给元素绑定事件(

jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案

jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数中遇到的一些问题. $(selector).on(event,childSelector,data,function,map) 各个参数说明如下: 参数描述 event 必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值.必须是有效的事件. childSelector 可选

jquery在ajax新加入的元素后绑定事件click

使用YII在做一个点击小图.能够在弹出窗体中显示大图的功能的时候,发现.GridView首页面的列表项按点击时一切正常,但按下了下一页后. 再点击小图,就不起作用了.原来,这是GridView使用了ajax分页,分页后的元素是新添加的,所以不会绑定事件,要改变这种状况,能够例如以下方法解决. 原来的代码:admin.php $(document).ready(function(){ $(".r_img img").click(function(){ var path=$(this).a

7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

jQuery简介宗旨:Write less, do more. 内部封装了js代码是编程更加简单并且兼容所有的主流浏览器版本:1.x 2.x 3.x # 可以使用3.x最新版是第三方的类库:使用jQuery需要提前导入 # 实际中很容易遗忘了导入 jQuery下载压缩之后的版本将很多变量名全部使用英文字母代替了导入方式本地导入缺点在于需要提前下载文件优点在于不会受到网络的影响 CDN导入 # CDN:内容分发网络网站:bootcdn jquery最好使用3.4.1版本基本使

(Jquery)关于给动态加载的页面元素，绑定事件

如果使用Jquery给元素绑定事件,一般会用bind,或者类似click函数来直接绑定. 但是对于动态生成的元素,会发现常规绑定无法生效,比如: <div class'div'></div> 动态给div添加元素: $('.div').append($('<a>点我</a>')) 此时如果想给div下的a绑定事件,使用: $('.div>a').click(function(event){ alert('点击成功'); }); 将发现无法触发alert

Jquery 在动态元素上绑定事件

弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" value="确定" /> <div id="divcontent"> </div> <script> $(function () { $("#btnyes").on("click", funct

【原生js】js动态添加dom，如何绑定事件

首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可. 需要注意的是,在你可能同事需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以

dom元素循环绑定事件的技巧

以前总觉得自己写的代码不太规范,尤其是写原生的时候.举个例子: 要为页面上所有".a"的元素绑定事件,当然了用jquery很方便:$('.a').bind("click",fn); 原生的话,我们很多会这样写: for(var i=0;i<length;i++){ elem[i].onclick=function(x){return function(){}}(i); } 但是如果,我要连续绑定两个事件呢? for(var i=0;i<length;i+

append方法添加的元素不能绑定事件

热门专题