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>
