您的位置:首页 > Web前端 > JQuery

jquery循环中动态绑定事件

2015-05-26 00:00 375 查看
摘要: jquery循环中动态绑定事件

$(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" />
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: