jQuery為非同步載入的元素註冊事件處理函式

antzone發表於2017-03-24
jQuery非同步事件函式

本章節介紹一下如何為非同步記載的元素註冊事件處理函式，非同步載入的資料通常情況動態生成的，無法採用bind()或者click這種形式直接註冊事件處理函式，看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
ul li{
  width:350px;
  height:25px;
  list-style:none;
  font-size:12px;
}
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#box li").click(function(){
    $("#show").text($(this).text());
  })
  $("#bt").click(function(){
    $("#box").append("<li>這是螞蟻部落新新增的資料。</li>");
  })
})
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天。</li>
  <li>沒有人一開始就是高手，必須要通過努力才行。</li>
  <li>要珍惜每一分鐘，失去就永遠不會回來。</li>
  <li>太陽每一天都是新的，不要浪費。</li>
</ul>
<input type="button" id="bt" value="新增元素"/>
</body>
</html>

上面的程式碼中，點選原來的li元素能夠觸發click事件，但是點選按鈕新新增的li元素則不會觸發，這是因為新新增的元素並沒有註冊相應的事件處理函式，那麼我們可以通過其他途徑來避免此問題的出現。解決的方式就是利用事件冒泡效果，將事件處理函式註冊在li元素的父元素上，那麼就算是點選沒有註冊事件處理函式的新新增的li，也會觸發事件，因為事件會向上冒泡。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
ul li{
  width:350px;
  height:25px;
  list-style:none;
  font-size:12px;
}
</style> 
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#box").on("click","li",function(){
    $("#show").text($(this).text());
  })
  $("#bt").click(function(){
    $("#box").append("<li>這是螞蟻部落新新增的資料。</li>");
  })
})
</script>
</head>
<body>
<div id="show"></div>
<ul id="box">
  <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天。</li>
  <li>沒有人一開始就是高手，必須要通過努力才行。</li>
  <li>要珍惜每一分鐘，失去就永遠不會回來。</li>
  <li>太陽每一天都是新的，不要浪費。</li>
</ul>
<input type="button" id="bt" value="新增元素"/>
</body>
</html>

上面的程式碼實現了我們的要求，點選新新增的元素也會觸發事件，當然這裡不是什麼非同步操作，但是原理是一樣的。

相關閱讀:

1.on()函式可以參閱jquery on()一章節。

2.append()函式可以參閱jQuery append()一章節。

相關文章