jquery 循环添加事件

jquery 循环添加事件,第1张

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>menu</title>

<style type="text/css">

</style>

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<script type="text/javascript">

$ (function ()

{

var sum = 5

var funny = function (x)

{

$ ("#id" + x).on ('click', function ()

{

alert ($ (this).attr ("id"))

})

}

$ ("div").on ("keyup", function ()

{

for ( var x = 1x <= sumx++)

{

funny (x)

}

})

})

// 绑定事件只能是在页面初始化的时候绑定,

// 只要绑定一次就可以,而且必须绑定一次,正常需求下。

// 如上:每次div键盘谈起,就绑定事件,事件累加绑定,导致效率低下,结果很大概率出错。

// jquery选择器,包括 以id开头的id的dom元素的获取方法

// $("*[id^=id]").each (function (i, dom){

// var me = $(this), idx = me.attr ("id").replace(/[^\d]/g,'')

// if (idx >= 1 &&idx <= sum)

// {

//// TODO

// }

//})

// 无论如何都不需你那样做。好自为之

</script>

</head>

<body>

<div>ddddddddddddd</div>

<span id="id1">aaaaaaaaaaaa</span>

<span id="id2">aaaaaaaaaaaa</span>

<span id="id3">aaaaaaaaaaaa</span>

<span id="id4">aaaaaaaaaaaa</span>

<span id="id5">aaaaaaaaaaaa</span>

</body>

</html>

方法如下:

1.页面载入完毕响应事件

所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和 *** 作了。

①jQuery中的$(doucument).ready()事件

ready(fn)是jQuery事件模块中最重要的一个函数。这个方法可以看作是对window.onload注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的javaScript函数都是需要在那一刻执行。

ready(fn) 返回值:Object 参数-fn:要在DOM载入就绪时执行的参数Function 当DOM载入就绪时绑定一个要执行的函数

而它有一种很简单的缩写形式$(document).ready(function(){}) =>$(function(){})

②window.onload()事件和$(document).ready()事件的比较

window.onload()=function(){}

如果使用多个window.onload(),则只有最后一个绑定的函数能被执行,它将覆盖前面所有window.onload()绑定的函数。

如果使用多个$(),则它们都能被执行。

需要注意的是如果<body onload>body标签的onload事件已经注册了某个函数 则$()事件注册的函数将不会被执行

2.绑定与反绑定事件监听器

①绑定事件

⑴bind(type,[data],fn)函数

就是将某函数与某元素的某事件绑定在一起 $("#id").click(function(){})就是将一个匿名函数与id元素的click事件绑在一起

但上面的例子其实只是缩写形式,因为其是简单常用的事件绑定,正规写法应如下:

$("#id").bind("click",[data],function(){})

bind(type,[data],fn) 返回值:Object 参数-type:事件类型String data:可选,作为event.data属性值传递给后面fn的实参Object fn:绑定到事件上的函数Function

⑵为处理函数传递参数

这里用到bind()函数的第二个参数及event.data属性为fn函数传递参数

代码如下:

<input id="Text2" type="text" />

$("#Text2").bind("click",{first:"1",second:"2"},function(event){

if(event.data.first=="1"){$(this).val("欢迎光临")}

if(event.data.second=="1"){$(this).val("")}

})

})

你最终的目的应该是想在input按钮上加入点击事件吧,点击后将input的值写入cookie吧,这样

的话,给tr加事件是没有意义的,下面的代码在不引用任何构架的前提下实现的,没有使用jquery

也没有使用ExtJS,相对比较麻烦些,希望你能看懂,如果用jquery的话,更简单了,这里就不写了

function writeCookie(name, value) {

// 写入cookie的代码你自己去实现

}

var rows = new Array() // 这个表格行的数组你自己组织吧,我这里只是定义一个简单的js数组,你可以从后台取这个值

// 先生成HTML代码,输出到网页上,这样才用JS绑定事件

var strHTML = ''

for(var i=0 i<rows.length i++) {

strHTML='<tr>' +

'<td><input id='btn_" + i + "' type="hidden" value='" + rows[i].id + "' /></td>' +

'<td>无关紧要的内容</td>' +

'</tr>'

}

document.writeln(strHTML)

// 绑定事件

for (var i=0 i<rows.length i++) {

var btnName = 'btn_' + i

var e = document.getElementById(btnName)    // 循环取出每个按钮对象

var value = e.value             // 取出按钮的值

e.onclick = function() {

writeCookie(btnName, value)     // 以btnName作为键名,将按钮的值写入cookie

}

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11274544.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存