给html元素循环绑定事件

/**
 * 添加点击的样式
 */
function addClickClass(){
    var eles = ["a.province",".citys"];
    var classes = ["hover","hover2"];
    for (var i = 0; i < eles.length; i++) {
        var obj = new addClickClass_(i,eles,classes);
        $(eles[i]).bind("click",obj.clickFunc);
    }
}
function addClickClass_(idx,eles,classes) {
    this.clickFunc = function(event) {
        event = event ? event : window.event;
        var obj = event.srcElement ? event.srcElement : event.target;
        $(eles[idx]).removeClass(classes[idx]);
        $(obj).addClass(classes[idx]);
    }
}

这里是实现了一个改变样式的功能。

时间: 2024-10-03 23:28:36

给html元素循环绑定事件的相关文章

js循环绑定事件

在js中,用循环来为一对元素队列的元素绑定事件,是一个常见的问题. 通常进入误区的新人,都会这么写代码: (假设元素队列为o,默认使用jQuery) //error method var o =$('.blockHead'); for(var i=0; i<o.length; i++){ o[i].onclick = function(){ function(i){ alert(i); } } } 当然这种情况下,你会发现每个元素点击运行时,显示的 i值 都是 o.length-1: 因为js的

用JS动态创建SVG元素并绑定事件

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "800"); svg.setAttribute("height", "500"); svg.addEventListener("load", function () {

JavaScript利用闭包循环绑定事件

我们经常在做前端面试题的时候,会遇到循环绑定事件后,输出打印结果,很多人总是搞不清楚,今天借此机会跟大家梳理一下闭包相关作用. 1.首先我们举一个简单的例子. html部分: <a href="#">首页</a> <a href="#">作品</a> <a href="#">文章</a> <a href="#">工具</a> <

遇到的问题(JS循环绑定事件)

问题描述:想通过循环的方式给HTML元素绑定事件,结果失败---总是会只能绑定到最后一个元素. HTML <div id="bnts"> <span></span> <span></span> <span></span> <span></span> </div> JS var bnts = document.getElementById("bnts"

jQuery1.9&amp;2.0及其以上版本中动态元素 on绑定事件无效的解决方案

jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数中遇到的一些问题. $(selector).on(event,childSelector,data,function,map) 各个参数说明如下: 参数 描述 event 必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值.必须是有效的事件. childSelector 可选

jquery在ajax新加入的元素后绑定事件click

使用YII在做一个点击小图.能够在弹出窗体中显示大图的功能的时候,发现.GridView首页面的列表项按点击时一切正常,但按下了下一页后. 再点击小图,就不起作用了.原来,这是GridView使用了ajax分页,分页后的元素是新添加的,所以不会绑定事件,要改变这种状况,能够例如以下方法解决. 原来的代码:admin.php $(document).ready(function(){ $(".r_img img").click(function(){ var path=$(this).a

JQuery中动态生成元素的绑定事件(坑死宝宝了)

今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "data": function (datas) { return "<a data-url='/Device/Edit?id=" + datas.Id + "' data-toggle='modal' class='btn btn-sm btn-default btn

解决jquery新加入的元素没有绑定事件问题

在使用jquery操作时,往往需要动态的添加一些元素,但是这些新加入的元素并没有像css那样被赋予原本定义的样式,解决方法如下: 1.动态插入元素后,并用bind事件给新加入的元素绑定事件. 2.如果使用的是jquery 1.8以下的版本,可以使用live()方法进行绑定. $(function(){ $("a").live("click", function(){ alert("ok"); }); }); 3.使用on()方法来给元素绑定事件(

Jquery 在动态元素上绑定事件

弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" value="确定" /> <div id="divcontent"> </div> <script> $(function () { $("#btnyes").on("click", funct