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>




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM