`

jquery循环绑定事件

阅读更多
<html>
    
<head>
        
<title></title>
        
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
</head>
    
<body>
        
<script type="text/javascript">
            $(document).ready(
function () {
                
var array = [0123];

                
// 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" />        
    
</body>
</html>
分享到:
评论

相关推荐

    深入理解JQuery循环绑定事件

    在深入探讨jQuery循环绑定事件之前,我们需要了解jQuery是什么。jQuery是一个快速、小巧、功能丰富的JavaScript库,它通过一个统一的API简化了HTML文档遍历、事件处理、动画和Ajax交互。使用jQuery,开发者可以编写...

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

    在使用JQuery进行DOM操作时,特别是在循环中为多个元素绑定事件,需要注意变量作用域以及事件绑定的正确方式。...通过这篇文章,读者可以深入理解JQuery循环绑定事件的机制,并在实际项目中正确应用这一技巧。

    jquery绑定click事件传递参数

    本文将深入探讨如何使用jQuery来绑定click事件,并传递参数。 首先,`click`事件是jQuery中用于监听元素被点击时触发的事件。它允许我们在用户点击DOM元素时执行特定的函数或代码块。基本的用法是在目标元素上调用`...

    jquery绑定事件不生效的解决方法

    然而,有时我们可能会遇到jQuery绑定事件不生效的情况,这通常与代码执行时机、DOM加载状态或代码本身的问题有关。针对标题和描述中提到的问题,我们将深入探讨解决这类问题的方法。 首先,问题的核心在于jQuery的...

    jquery循环

    在实际的网页开发中,jQuery的循环功能广泛应用于数据绑定、动态渲染、事件处理等场景。熟练掌握这些循环方法,能极大地提高我们的编程效率。同时,理解它们底层的工作原理,也有助于我们更好地优化代码,提升网页...

    关于表格(table)中checkbox等相关事件操作(动态添加行+隔行换色等相关)(jquery)

    这需要绑定`click`事件,遍历所有的子复选框并更新它们的状态: ```javascript $("#selectAll").on("click", function() { if ($(this).is(":checked")) { $("table tbody tr td input[type='checkbox']").prop(...

    jQuery圆形循环信息展示插件

    这种插件通常采用JavaScript库jQuery作为基础,利用其强大的DOM操作能力和事件处理功能,实现信息的动态循环展示,使得数据可视化更加生动有趣。 **一、jQuery简介** jQuery是由John Resig于2006年创建的一个...

    jquery绑定 css3 animation-keyframes关键帧动画

    4. **jQuery 事件绑定** - 在本例中,我们使用jQuery的`.click()`方法来监听按钮的点击事件。 - 当按钮被点击时,`.click()`方法内部的函数会被调用,并向目标元素添加包含动画样式的类。 5. **示例代码解析** -...

    Jquery为单选框checkbox绑定单击click事件

    &lt;/dd&gt; 选中事件(根据选中情况修改上一层背景): 代码如下: var $test_image_check_box_click = function() { if ($(this).attr(“checked”) == “checked”) { $(this).parent().css({“background”:”#dcf4fc...

    js和jquery批量绑定事件传参数一(新猪猪原创)

    这篇标题为“js和jquery批量绑定事件传参数一(新猪猪原创)”的文章介绍了在不使用jQuery以及使用jQuery两种情况下,如何批量地给一组按钮元素绑定点击事件,并在事件触发时传递参数。 首先来看JavaScript原生的做法...

    JQ 事件绑定

    总结,jQuery 的事件绑定机制使得开发者能够轻松地为页面元素添加交互功能,无论是简单的点击事件还是复杂的事件委托,都能通过简洁的API实现。结合`.on()`, `.off()`, `.trigger()` 等方法,可以创建出高度动态和...

    table 绑定数据 jquery 分页

    #### 2.2 使用JQuery进行事件绑定 通过`$(function(){})`语法,当DOM元素加载完成后执行其中的函数。这里绑定了按钮`#btnSearch`的点击事件,当用户点击该按钮时,触发搜索操作。 ```javascript $("#btnSearch")....

    一个jQuery插件用于数据绑定的HTMLRender模板引擎

    HTMLRender是一款基于jQuery的数据绑定模板引擎,主要用于帮助开发者在JavaScript中高效地进行DOM操作和数据渲染。这款插件是jQuery的一个扩展,它提供了一种简洁的语法来将数据与HTML结构进行绑定,使得动态生成和...

    浅谈jQuery绑定事件会叠加的解决方法和心得总结

    `.bind()`是jQuery早期版本中用于绑定事件的方法,而在jQuery 1.7及以后的版本中,它被`.on()`方法所取代,两者都能实现相同的功能。当为DOM元素绑定事件处理函数时,每次调用这些方法都会添加一个新的监听器,而...

    jQuery动态添加li标签并添加属性和绑定事件方法

    在本文中,我们将深入探讨如何使用jQuery来动态地添加`li`标签,并向这些标签添加属性以及绑定事件。首先,让我们解析一下标题和描述中提到的关键知识点。 **jQuery动态添加li标签** 在jQuery中,我们可以使用`...

    jQuery图片循环轮播代码

    // 绑定事件 bindEvents(); }); function initSlider() { // 创建缩略图 createThumbnails(); // 设置初始状态 slides.first().addClass("active"); updateThumbnails(); } function bindEvents() { ...

    Jquery on方法绑定事件后执行多次的解决方法

    在使用Jquery进行事件处理时,我们经常会用到on方法来绑定事件处理器。然而,在某些场景下,比如动态添加元素到DOM中并给这些元素绑定事件时,我们可能会遇到事件绑定多次的情况,即同一个事件处理器被重复执行多次...

    多行滚动jQuery循环新闻列表代码.rar

    "多行滚动jQuery循环新闻列表代码.rar" 这个标题指的是一个使用jQuery库实现的、能够展示多行新闻并进行循环滚动的代码示例。jQuery是一个广泛应用于网页开发的JavaScript库,它简化了DOM操作、事件处理、动画效果...

Global site tag (gtag.js) - Google Analytics