jQuery:如何给动态生成的元素绑定事件？ -

moqiang02

浏览: 529108 次
性别:
来自: 苏州

最近访客更多访客>>

u012363178

LSPITYPE_

jcj_2012

408467806

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1393)

社区版块

存档分类

2014-09 ( 3)
2014-08 ( 65)
2014-07 ( 212)
更多存档...

jQuery:如何给动态生成的元素绑定事件？

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

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

$(‘#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>

分享到：