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

快乐打工仔 分类:实例代码

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

代码实例如下:

<!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()可以把事件注册在父元素上,当触发新添加按钮的事件的时候,事件会冒泡到父元素,然后执行事件处理函数。更多内容可以参阅相关阅读。

相关阅读:

(1).on()可以参阅jquery on()一章节。

(2).事件冒泡可以参阅什么是jquery事件冒泡一章节。

jQuery为动态添加的按钮注册事件处理函数,这样的场景在实际项目中还是用的比较多的,关于jQuery为动态添加的按钮注册事件处理函数就介绍到这了。

jQuery为动态添加的按钮注册事件处理函数属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容