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+…
两种类型1.$('li').bind('click',function(){}); 当你用js动态添加li的时候,你添加的li不具有你绑定的事件.这种写法与$('li').click(function(){})一样.2.$('li').live('click',function(){}); 当你用js动态添加li的时候,你添加的li具有你绑定的事件…
HTML代码: <button type='button' class='btn' id='1'>按钮1</button> <button type='button' class='btn' id='2'>按钮1</button> <button type='button' class='btn' id='3'>按钮1</button> <button type='button' class='btn' id='4'>按钮…
通过knockout数据绑定的DOM元素,通过chrome控制台打断点知道,DOM元素会被暂时隐藏,使用document.querySelector()是获取不到的,会显示null,直到数据绑定完成才会出现.如果要在这些DOM元素上面绑定事件,必须再数据绑定完成之后添加事件,而且绑定事件和数据绑定的代码必须写在同一个作用域里.不然添加绑定事件不会成功. 案例 一段AJAX调用成功后绑定数据,并且添加事件的代码(ajax已被封装) var ViewModel = { availableCashDa…
    jQuery API提供了一种能够查看元素已绑定事件的列表,这个功能在进行功能调试的时候特别有用,尤其确定在代码执行过程中元素绑定的事件是否被更改. 1: jQuery( elem ).data( "events" ); 这种是jQuery 低于1.8版本的写法.到了1.8版本以后,调用方式改为了: 1: jQuery._data( elem, "events" );    其中elem为dom元素,不能为jQuery对象或者选择器. 原文链接地址:http…
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完dom以后立即执行一次函数A即可. 需要注意的是,在你可能同事需要添加许多的dom,不要添加一个就执行一次函数A,这样会增加浏览器的负载,你需要在所有dom添加完以后在执行函数A,例如你用一个for循环遍历dom组合并拼接成一个字符串,然后添加到某个父级dom里面,这个时候你需要在循环外添加一次就可以…
我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href="#">首页</a> <a href="#">作品</a> <a href="#">文章</a> <a href="#">工具</a> <…
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: 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的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前端开发使用了jquery 和 artTemplate技术,其中经常要通过artTemplate的template.compile()方法来实现像是向下滚动鼠标动态加载后续分页的内容并显示在页面上这样的效果. 在jquery官网上关于事件绑定和事件委托的4个方法中有这样的介绍: live():jQue…
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li> </ul> <script> $("ul").click(function(event) { console.log(event); va…
偶尔看到了这个问题,如何用JS获取元素某一事件上绑定的所有Listener? 突然觉得好像是有解决办法的,查了下,在 chrome 下,支持 window.getEventListeners(obj) 例如: addEvent(aLink, 'click',f, false); window.getEventListeners(aLink) 返回: 如果要模仿 chrome 实现呢,也是可以的,需要修改 addEventListener 和 removeEventListener,或者你自己自定…
jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数中遇到的一些问题. $(selector).on(event,childSelector,data,function,map) 各个参数说明如下: 参数 描述 event 必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值.必须是有效的事件. childSelector 可选…
在1.8.0版本之前的写法: $.data(domObj,'events');//或者$('selector').data('events') 1.8.0及以后的写法: $._data(domObj,'events');//注意,这里不能像$('selector')._data('events')这样用了. 兼容的写法: var eventsData = $.data(domObj,'events') || $._data(domObj,'events'); 备注: 1.domObj节点必须为d…
在使用jquery操作时,往往需要动态的添加一些元素,但是这些新加入的元素并没有像css那样被赋予原本定义的样式,解决方法如下: 1.动态插入元素后,并用bind事件给新加入的元素绑定事件. 2.如果使用的是jquery 1.8以下的版本,可以使用live()方法进行绑定. $(function(){ $("a").live("click", function(){ alert("ok"); }); }); 3.使用on()方法来给元素绑定事件(…
动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})…
如果使用Jquery给元素绑定事件,一般会用bind,或者类似click函数来直接绑定. 但是对于动态生成的元素,会发现常规绑定无法生效,比如: <div class'div'></div> 动态给div添加元素: $('.div').append($('<a>点我</a>')) 此时如果想给div下的a绑定事件,使用: $('.div>a').click(function(event){ alert('点击成功'); }); 将发现无法触发alert…
今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "data": function (datas) { return "<a data-url='/Device/Edit?id=" + datas.Id + "' data-toggle='modal' class='btn btn-sm btn-default btn…
弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" value="确定" /> <div id="divcontent"> </div> <script> $(function () { $("#btnyes").on("click", funct…
父页面HTML文件: <ul id="faul"> <li class="sonli">子页面列表1</li> <li class="sonli">子页面列表2</li> <li>子页面列表3</li> <li>子页面列表4</li> </ul> 子页面js文件 1.//点击父页面的li元素触发的事件 $(parent.$(&q…
jquery事件绑定有2种方式: 1,普通事件绑定: $('元素').click(function(){}); 2, 事件代理或者叫事件委托 $('#chatPanelList').on('click','.leftMsg .msgDiv .msgText .stionsList li .answerBtn',function(e) {}); 结: 如果动态生成的则无法绑定事件.你可以用事件委托来处理. 产考链接: https://blog.csdn.net/linsygod/article/d…
参照网上前辈: 方法一:绑定live事件 live(type,[data],fn) $(selector).live("click",function(){ alert("点击了"); }): 但是测试无效,因为从 jQuery 1.7 开始,不再建议使用 .live() 方法.请使用 .on()来添加事件处理,到1.9已经不支持了 方法一:绑定on事件  ($(ParentEle).on("click",".thisEle"…
使用YII在做一个点击小图.能够在弹出窗体中显示大图的功能的时候,发现.GridView首页面的列表项按点击时一切正常,但按下了下一页后. 再点击小图,就不起作用了.原来,这是GridView使用了ajax分页,分页后的元素是新添加的,所以不会绑定事件,要改变这种状况,能够例如以下方法解决. 原来的代码:admin.php $(document).ready(function(){ $(".r_img img").click(function(){ var path=$(this).a…
在jQuery当中append是动态向页面中添加元素的常见方法,但是很多时候append添加之后的节点再次绑定事件(比如click)的时候,就会发现click失效,这时候就会涉及到,on() 高版本的jQuery中.on()启用之后bind和live都已经失效. 再说上面的问题,如$(".DIV").append("<li>123</li>"),这时候用$(".DIV").click()方法绑定就会发现click事件没有绑…
<ul> <li>男</li> <li>女</li> <li>老</li> <li>少</li> </ul> 使用js为多个未知数量的li循环添加事件的时候很容易想到如下代码 for( var i= 0,lis = document.getElementsByTagName("li"),len=lis.length; i<len;i++){ lis[i].onc…
其实这个问题有多个解决方法的  这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数  这时候千万别忘记 原创 如需转载注明出处 谢谢…
问题: 如题,就是说alert后出现一个对话框,我没有点关闭,其他js文件或html会被加载吗,我遇到一个问题就是在页面加载时调用一个div的click事件,却没有被执行,但是在调用事件前面加上alert('xx'):运行后手动关闭提示框click事件就调用成功,为什么,也写了个sleep函数,但不论sleep多久click事件也不会被执行,那我要怎样才能自动调用这个click. 解决方法: 将代码包含在onload中,进行(window.onload())加载. 原理: 首先网页接你所编写的代…
用ng-repeat循环是如果有ng-click之类的事件需要传入参数我们一般这样写 <span class='del' ng-click="RemoveCost({{item.Id}})">删除</span> 其实这样的值是传入不到ng-click里面去的,这里不要用{{}}来包裹,可以这样写 <span class='del' ng-click="RemoveCost(item.Id)">删除</span> 第二种…
<html> <head> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <script type="text/java…
<div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(".b").click(function(){})方法失效 原来jq中动态添加的元素不能直接使用$(".b").click(function(){});的方法,要使用$(".a").on('click','.b',function(){}); $(&quo…
使用事件委托 $(document).on('click','selector',function(){ ... }); 示例 $(document).on("click", ".Inverse", function () { $(this).toggleClass("current"); }) 将事件冒泡到document上,当检测到事件的target时,触发事件…