zoukankan      html  css  js  c++  java
  • jQuery:如何给动态生成的元素绑定事件?

    jQuery的html()可以给现在元素附加新的元素,innerHTML也可以,那么,如何给这些新生成的元素绑定事件呢?直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本不存在。

    然而,jQuery为我们提供了一个函数来解决这个问题,它就是.live()(备注:jquery的后期版本变为.on() ),它可以给所有元素绑定事件,不论是已有的,还是将来生成的,比如:

    $(‘#div’).live(‘click’,function(){ 
        //do stuff 
    }); 
    

    它还可以同时绑定多个事件:
    $('.hoverme').live('mouseover mouseout', function(event) {
      if (event.type == 'mouseover') {
        // do something on mouseover
      } else {
        // do something on mouseout
      }
    });

    【实例】

    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
    </script>
    <html>
        <body>
            <input type="button" name="input[]" value="按钮1" />
            <input type="button" name="input[]" value="按钮2" />
            <input type="button" name="input[]" value="按钮3" />
            <a id="add">添加</a>
        </body>
    </html>
    <script type="text/javascript">
        $("#add").click(function() {
            var inp = $(":input:last").clone();
            $(":input:last").after(inp);
        })
    
        // 为每一个button绑定onclick事件,alert一下
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onclick = function() {
                alert("我测试一下");
            }
        }
    
        $(':input').live('click',function() {
            alert("我再测");
        });
    </script>

    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
    </script>
    <html>
        <body>
            <input type="button" name="input[]" value="按钮1" />
            <input type="button" name="input[]" value="按钮2" />
            <input type="button" name="input[]" value="按钮3" />
            <a id="add">添加</a>
        </body>
    </html>
    <script type="text/javascript">
        $("#add").click(function() {
            var inp = $(":input:last").clone();
    		inp2 = inp.val("按钮"+($(":input").length+1));
    		inp3 = inp2.attr("id","a"+($(":input").length+1))
            $(":input:last").after(inp3);
        })
    
        //为每一个button绑定onclick事件,alert一下
        //var inputs = document.getElementsByTagName("input");
    	//预先加载,inputs.length最大等于3
        for (var i = 0; i < 99; i++) {
    		$("#a"+i).live('click',function(){
    			alert($(this).val());
    		})
        }
    	
        $(':input').live('click',function() {  
            alert($(this).val());
        });	
    </script>



  • 相关阅读:
    查看yarn当前执行任务列表
    小白学开发(iOS)OC_ 字符串的获取 (2015-08-11)
    【leetcode】Search in Rotated Sorted Array (hard)
    【leetcode】Spiral Matrix II (middle)
    【leetcode】Spiral Matrix(middle)
    【leetcode】Reverse Bits(middle)
    【leetcode】Number of 1 Bits (easy)
    【leetcode】Set Matrix Zeroes(middle)
    【leetcode】Reorder List (middle)
    【leetcode】Reverse Linked List II (middle)
  • 原文地址:https://www.cnblogs.com/moqiang02/p/4061282.html
Copyright © 2011-2022 走看看