当前位置: 首页 > 编程笔记 >

JQuery在循环中绑定事件的问题详解

司寇照
2023-03-14
本文向大家介绍JQuery在循环中绑定事件的问题详解,包括了JQuery在循环中绑定事件的问题详解的使用技巧和注意事项,需要的朋友参考一下

有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说

<input type="text" name="username" id="username_1" value="" />
<input type="text" name="username" id="username_2" value="" />
<input type="text" name="username" id="username_3" value="" />

现在有个循环,在页面载入的时候需要给这每个元素增加一个onclick事件,很容易想到的写法就是

$(function(){
 for(var i=1; i<=3; i++){
  $('#username_'+i).onclick(function(){
   alert(i);
  });
 }
});

这么写是错误的。。。

错误的原因以及类似的错误分析详见这篇文章《深入理解JQuery循环绑定事件》

然后改成下面的就对了

$(function(){
 for (var i=1; i<=3; i++){
  $("#username_"+i).bind("click", {index: i}, clickHandler);
 }

 function clickHandler(event) {
  var i= event.data.index;
  alert(i);
 }
});

以上这篇JQuery在循环中绑定事件的问题详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍深入理解JQuery循环绑定事件,包括了深入理解JQuery循环绑定事件的使用技巧和注意事项,需要的朋友参考一下 深入理解JQuery循环绑定事件 以上这篇深入理解JQuery循环绑定事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jQuery中dom元素上绑定的事件详解,包括了jQuery中dom元素上绑定的事件详解的使用技巧和注意事项,需要的朋友参考一下 作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台。。。 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。 查看

  • 本文向大家介绍jQuery unbind 删除绑定事件详解,包括了jQuery unbind 删除绑定事件详解的使用技巧和注意事项,需要的朋友参考一下 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。你可以将你用bind()注册的自定义事件取消绑定。如果提供了事件类型作为参数,则只删除该类型的绑定事件。

  • 本文向大家介绍解决jquery appaend元素中id绑定事件失效的问题,包括了解决jquery appaend元素中id绑定事件失效的问题的使用技巧和注意事项,需要的朋友参考一下 1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用。 2.解决办法: 举例:如果在一个<div class="title"></div>中,通过app

  • 本文向大家介绍jquery 新建的元素事件绑定问题解决方案,包括了jquery 新建的元素事件绑定问题解决方案的使用技巧和注意事项,需要的朋友参考一下 js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现。而事件监听不是,你必须给每一个元素单独绑定事件。 常见的例子是处理表格的时候。每行行末有个删除按钮,点了这个能够删除这一行。 通常,我会这么绑定 对

  • 问题内容: 我目前正在将一个大型应用程序移植到基于HTML5的Web应用程序上-我已经开始在AngularJS中构建该应用程序并享受AngularJS框架的功能- 目前,我遇到了一个问题: 我有一个给我jQuery Datepicker的指令,但是对模型的绑定似乎不起作用。 http://jsfiddle.net/9BRNf/ 我可能会误解指令的工作方式,并想了解我是否可以修补对框架的这一部分理解