javascript如何为创建的元素(DOM节点)动态绑定事件
时间:2017-07-28
项目开发中经常需要为动态创建的节点绑定事件,比如需要创建一个动态li列表并且为这些动态li列表绑定事件,这时用javascrit如何实现呢?大家仔细看完这篇文章就知道如何为创建的元素动态绑定事件了。
您可以使用live()方法将元素(甚至新创建的元素)绑定到事件和处理程序,如onclick事件。
以下是我编写的示例代码,您可以在其中看到live()方法如何将所选元素(甚至新创建的元素)绑定到事件中:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js"></script>
<input type="button" id="theButton" value="Click" />
<script type="text/javascript">
$(document).ready(function()
{
$('.FOO').live("click", function (){alert("It Works!")});
var $dialog = $('<div></div>').html('<div id="container"><input type ="button" id="CUSTOM" value="click"/>This dialog will show every time!</div>').dialog({
autoOpen: false,
tite: 'Basic Dialog'
});
$('#theButton').click(function()
{
$dialog.dialog('open');
return('false');
});
$('#CUSTOM').click(function(){
//$('#container').append('<input type="button" value="clickmee" class="FOO" /></br>');
var button = document.createElement("input");
button.setAttribute('class','FOO');
button.setAttribute('type','button');
button.setAttribute('value','CLICKMEE');
$('#container').append(button);
});
/* $('#FOO').click(function(){
alert("It Works!");
}); */
});
</script>
</body>
</html>
从jQuery 1.7开始你应该使用jQuery.fn.on
:
$(staticAncestors).on(eventName, dynamicChild, function() {});
在此之前,推荐的方法是使用live()
:
$(selector).live( eventName, function(){} );
但是,live()
在1.7中被弃用on()
,并在1.9中完全删除。该live()
签名:
$(selector).live( eventName, function(){} );
也可以用以下on()
替换:
$(document).on( eventName, selector, function(){} );
例如,如果您的页面动态创建具有类名称dosomething
的元素,那么您将事件绑定到已存在的父项document
。
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});
将事件绑定到任何存在的父级元素都是可以的。例如
$('.buttons').on('click', 'button', function(){
// do something here
});
将适用于
<div class="buttons">
<!-- <button>s that are generated dynamically and added here -->
</div>
- Setting Up KeePass For Centos 6
- 拼音米大热!快视”、“冰冰”等多个域名结拍
- 入门必读:Hadoop新手学习指导
- 使用密码记录工具keepass来保存密码
- 机器人带着VR学习,最后学会了人工智能
- 超经典的JBOSS入门文章
- ASP.NET2.0应用中定制安全凭证
- AI造的AI,比人造的还厉害,该喜还是该忧?
- Mono 3.2 测试NPinyin 中文转换拼音代码
- Reactive Extensions介绍
- Reactive Extensions(Rx) 学习
- 发布一个日期选择控件(ASPNET2.0)
- 做程序员压力山大,很多人都快疯了
- 小程序让交通出行变得如此简化,看看这些微信小程序你有在用了吗?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 看到一个不错的前端面试题开源项目
- PWN:UnsortedBin Attack
- React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App
- 我想new个对象过七夕,她却抛了异常···
- 在开启了CloudFlare的页面中显示当前节点信息
- MySQL 案例:无主键表引发的同步延迟
- 进入编译器后,一个函数经历了什么?
- Cloudflare中firewall的编写方法
- LeetCode 11盛水最多的容器&12整数转罗马数字
- 刷题一个4ms的程序,代码如何优化到3ms再到2ms?
- 【LeetCode】1. 盛最多水的容器:C#三种解法
- .NET core3.1使用cookie进行身份认证
- User-Agent那些事
- 三分钟Docker-推送本地镜像到仓库
- 初识ABP vNext(6):vue+ABP实现国际化