jQuery的html()能夠給如今元素附加新的元素,innerHTML也能夠,那麼,如何給這些新生成的元素綁定事件呢?直接在元素還未生成前就綁定確定是無效的,由於所綁定的元素目前根本不存在。javascript
然而,jQuery爲咱們提供了一個函數來解決這個問題,它就是.live()(備註:jquery的後期版本變爲.on() ),它能夠給全部元素綁定事件,不管是已有的,仍是未來生成的,好比:html
$(‘#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 } });
【實例】java
<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>