文档章节

jquery循环中动态绑定事件

quickhelper
 quickhelper
发布于 2015/05/26 16:04
字数 434
阅读 26
收藏 0
$(function(){
    var ids = ['startCard','endCard'];
    var message = ['必填(如:00000)', '必填(如:11111)'];
    for(var i=0 ;i<ids.length;i++){
        var v = $("#"+ids[i]).val();
        if(v==''){
            $("#"+ids[i]).val(message[i]);
            $("#"+ids[i]).css('color','red');
        }
        $("#"+ids[i]).bind("focus",{index:i},focusHandler).bind("blur",{index:i},blurHandler);
    }
    function focusHandler(event) {
        if($("#"+ids[event.data.index]).val()==message[event.data.index]) {
            $("#"+ids[event.data.index]).val("");
            $("#"+ids[event.data.index]).css('color','black');
        }
    }
    function blurHandler(event) {
        if($("#"+ids[event.data.index]).val()=='') {
            $("#"+ids[event.data.index]).val(message[event.data.index]);
            $("#"+ids[event.data.index]).css('color','red');
        }
    }
});

<input type="text" name="startCard" id="startCard"/>
<input type="text"  name="endCard" id="endCard"/>
<script type="text/javascript">
        $(document).ready(function() {
            var array = [ 0, 1, 2, 3 ];

            // 1.
            
            /* for(var index in array) {
                $("#btn" + index).click(function() {
                    var item  = array[index];
                    alert(item);
                });
            } */
            // 始终弹出3, 因为function() {} 并没有被立即解析,直到调用的时候才被解析,这时index已经是3了。

            // 2.
            
            /* for(var index in array) {
                $("#btn" + index).click(function(i) {
                    var item  = array[i];
                    alert(item);
                }(index));
            } */
            // 立即弹出0, 1, 2, 3,因为使用了function() {}(index)立即被解析,遇到alert,就立即弹出来了。

            // 3.
            /* for (var index in array) {
                $("#btn" + index).click(function (i) {
                    return function () {
                        var item = array[i];
                        alert(item);
                    };
                } (index));
            } */
            // 正确执行,点击btn0,弹出0,点击btn1,弹出1...
            // 1.因为function(i) {}(index)是被立即解析的,所以i依次送入的是0, 1, 2, 3
            // 2.内部没有直接alert,是因为不想立即执行,想点击时再执行,所以返回了一个函数出去。

            // 4.
            for ( var index in array) {
                $("#btn" + index).bind("click", {
                    index : index
                }, clickHandler);
            }

            function clickHandler(event) {
                var index = event.data.index;
                var item = array[index];
                alert(item);
            } 
            // 正确执行,点击btn0,弹出0,点击btn1,弹出1...
            // 利用了event.data,因为index在绑定的时候已经被持久化到event.data中了,所以响应的时候我们可以取到。
        });
</script>

    <input type="button" id="btn0" value="btn0" />
    <input type="button" id="btn1" value="btn1" />
    <input type="button" id="btn2" value="btn2" />
    <input type="button" id="btn3" value="btn3" />


本文转载自:http://www.cnblogs.com/ZhangPeng-Chen/archive/2010/07/30/1788764.html

quickhelper
粉丝 1
博文 82
码字总数 5482
作品 0
武汉
程序员
私信 提问
jquery要怎么写才能速度最快?(转)

很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记。 其内容和一些新提供的方法还是很多有值得学习的地方。 1. 使用最新版本的jQuery jQuery的版本更新很快,你应...

山哥
2012/03/16
124
0
jquery要怎么写才能速度最快?

很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记。 其内容和一些新提供的方法还是很多有值得学习的地方。 1. 使用最新版本的jQuery jQuery的版本更新很快,你应...

随影求是
2012/03/16
115
0
Python全栈 Web(jQuery 一条龙服务)

jQuery 1.jQuery介绍 jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件,提供了更为简便的元素操作方式 核心理念:Write Less Do More jQuery版本: jQuery 2.x 不再支持IE6.7.8 jQuery 1.11...

巴黎香榭
2018/09/17
0
0
开发中遇到的jQuery 事件处理机制的问题

前段时间遇到dom绑定click事件,触发时会重复执行绑定的函数,探究下jQuery事件绑定机制。基于jQuery-1.10.2。 起因:(对原始问题的一个抽象案例) 问题描述 点击click[1-5]中的任意一个,接...

MrMign
2013/11/27
1K
9
jquery 新建元素的事件绑定

我想很多人都会向我一样曾经被动态添加元素的事件绑定困惑很久,也就是在页面加载完成后给已有元素绑定了事件,但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不一样,css只要设定...

陈好
2014/08/14
236
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
3
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
7
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部