jQuery为动态添加的按钮注册事件处理函数

快乐打工仔发布于 2年前分类：实例代码

本章节分享一段代码实例，它实现了为动态添加的按钮注册时间处理函数的功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()可以把事件注册在父元素上，当触发新添加按钮的事件的时候，事件会冒泡到父元素，然后执行事件处理函数。更多内容可以参阅相关阅读。