js,jq新增元素 ,on绑定事件无效

时间:2022-09-14 12:14:16

在jquery1.7之后,建议使用on来绑定事件。

 $('.upload a').on('click',function(){

  $(this).remove();

})

在DOM渲染的时候,也就是html页面本来在.upload元素下面有a的情况下,a的点击事件是有效的,即a的确能被移除。

但是用js加到DOM中的html,这样子写的绑定事件是无效的,

必须改成:

$('.upload').on('click','a',function(){

  $(this).remove()//js动态添加的元素也有效

})

必须注意的是:.upload 必须不是js动态生成的,也就是$()选择器必须选择不是动态生成的父元素。

js,jq新增元素 ,on绑定事件无效的更多相关文章

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

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  2. JQ动态生成节点绑定事件无效问题

    最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点->动态 ...

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

    jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...

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

    <div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...

  5. 关于Jquery的delegate绑定事件无效

    今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

  6. jQuery &period;on&lpar;&rpar; 绑定事件无效

    前几天,要在移动端实现一系列的功能,用 HTML + JS. 按照以往的思路,事件绑定就直接 $(document).on "click", "selector&quot ...

  7. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

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

    最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...

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

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

随机推荐

  1. Android中自定义控件TextSize属性问题

    本文主要说明一个自定义控件添加TextSize属性的坑,刚刚从坑里面爬出来,写个随笔,记录一下: *************************************************** ...

  2. css之字体设置

    字体大小font-size 字体风格font-style 字体加粗font-weight 字体类型font-family 字体阴影text-shadow 字体行高line-height 字间距lett ...

  3. Linux 创建用户和工作组

    创建用户 useradd user1                            #创建user1用户,创建user1用户同时会创建一个同名的工作组user1 passwd user1   ...

  4. &lbrack;算法&rsqb;&lbrack;包围盒&rsqb;球,AABB,OBB

    参考地址请看图片水印:http://www.cnblogs.com/iamzhanglei/archive/2012/06/07/2539751.html http://blog.sina.com.c ...

  5. Open XML SDK 在线编程黑客松

    2015年2月10日-3月20日,开源社 成员 微软开放技术,GitCafe,极客学院联合举办" Open XML SDK 在线编程黑客松 ",为专注于开发提高生产力的应用及服务的 ...

  6. 微信、微博、qq图标服务实现

    实现原理:变化前的图标和变化后的图标在一张图片上,用这张图片作为背景,通过定义背景的位置来实现显示哪个图标,其中还带着滑动的动画效果. <!DOCTYPE html> <html l ...

  7. JavaScript高级程序设计11&period;pdf

    与操作字符串有关的最后一个方法是localeCompare(),这个方法比较两个字符串,按照字符串的字母表中的位置分别返回-1,0,1 var stringValue="yellow&quo ...

  8. UWP项目的包无法通过本地校验程序

    在UWP工程中,我们打出的包Appx需要通过本地的校验程序校验通过后才可以进行商店的提交.在校验程序汇报的不通过原因当中,除了显而易见的因为美术资源不规范.代码调用不合法API等原因之外,还有一些奇怪 ...

  9. dom定位的三种元素

    1.通过id #XXX 2.通过标签  xxx 3.通过类  .xxx

  10. Asp&period;net MVC利用WebUploader上传大文件出现404解决办法。

    刚开始我上传小文件都是比较顺利的,但是上传了一个大文件大约有200M的压缩包就不行了.在chrome里面监视发现网络状态是404,我分析可能不是WebUploader的限制,应该是WebConfig限 ...