如何為新增的元素註冊事件處理函式

antzone發表於2017-03-14
事件函式

在實際應用中，我們可能隨時的新增或者刪除元素，同時也希望新增的元素自動註冊事件處理函式，下面就介紹一下如何實現此效果，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css">
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("li").click(function(){
    $("#show").html($(this).html());
  });
  $("#bt").click(function(){
    $("ul").append("<li>螞蟻部落</li>"); 
  })
})
</script> 
</head> 
<body> 
<div id="show"></div>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
<input type="button" id="bt" value="增加元素"/>
</body> 
</html>

在以上程式碼中，新增的元素並沒有被註冊事件處理函式，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("ul").on("click","li",function(){
    $("#show").html($(this).html());
  });
  $("#bt").click(function(){
    $("ul").append("<li>螞蟻部落</li>"); 
  })
})
</script> 
</head> 
<body> 
<div id="show"></div>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
<input type="button" id="bt" value="增加元素"/>
</body> 
</html>

新增的li元素一樣具有click事件處理函式，可以參閱jQuery on()方法一章節。

相關文章