jQuery為動態新增的按鈕註冊事件處理函式

antzone發表於2017-04-18
jQuery事件函式

本章節分享一段程式碼例項，它實現了為動態新增的按鈕註冊時間處理函式的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant{
  width:200px;
  height:100px;
  background:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  var num = 1,
  $_div = $('#ant');
  $('input[name=addbtn]').on('click', function () {
    $_div.append('<input type="button" name="antzone' + num + '" value="按鈕' + num + '"/>');
    num++;
  });
 
  $_div.on('click', 'input[name^=antzone]:even', function () { 
    alert('我是有效的on方法,你能看見我嗎：' + this.value);
  });
 
  $('input[name^=antzone]:odd').on('click', function () { 
    alert('我是無效的on方法,你不能看見我');
  });
 
  $('input[name^=antzone]:odd').live('click', function () {
    alert('我是live方法,你能看見我嗎：' + this.value);
  });
});
</script>
</head>
<body>
<input type="button" name="addbtn" value="新增按鈕" />
<div id="ant"></div>
</body>
</html>

上面的程式碼實現了我們的要求，之所以使用on()能夠為動態新增的按鈕註冊事件處理函式，是因為on()可以把事件註冊在父元素上，當觸發新新增按鈕的事件的時候，事件會冒泡到父元素，然後執行事件處理函式。更多內容可以參閱相關閱讀。

相關閱讀:

（1）.on()可以參閱jquery on()一章節。

（2）.事件冒泡可以參閱什麼是jquery事件冒泡一章節。

相關文章