JavaScript动态绑定事件

什么是动态绑定事件？

js最突出优点在于能动态修改页面样式和动态修改页面内容，然而在我们开发过程中，将动态添加的元素中绑定事件的现象称为动态绑定事件。

动态绑定无法触发js的案例？

<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><table><tbody><tr><td>1</td><td>2</td></tr></tbody></table>
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script>//页面就绪化$(function(){$("td").click(function(){$("<td>2</td>").appendTo("tr");});});});
</script>
</html>

案例分析：在简单的js添加td案例中，js取到td,单击td动态添加一行td，value=3；在动态添加的td单击却无法继续添加，而单击静态td可继续添加。

处理动态绑定失效的方法

// js部分
$(function(){$("tr").on("click","td",function(){$("<td>2</td>").appendTo("tr");});});

分析：通过查阅相关说明，发现jQuery的on()方法是支持在动态添加的元素上绑定事件的。
当将上述事件不绑定在tr上而是绑定在td上时，无法触发生成td事件，而绑定在tr父节点上，不仅可以添加td，并且动态产生的td也可以触发生成td。

JavaScript动态绑定事件相关推荐

jQuery框架-动态绑定事件on与off-jQuery循环遍历
动态绑定事件:绑定(on)与解绑(off) 目标学习事件的动态绑定与解绑什么是事件绑定在JS代码执行过程中,让某些元素绑定一些事件,这时这个元素就可以激活这些事件.也可以在执行过程中解绑一些事件 ...
Javascript调用事件方法
Javascript调用事件方法:函数响应事件.代码响应事件.动态绑定处理事件 1.函数响应事件 <script> function eventHandler(){alert(" ...
jquery - 动态绑定事件
举个例子: html页面 <div><button type="button" class="test">测试</button&g ...
Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述自定义事件很难 ...
wxml修改样式_微信小程序动态绑定事件并实现事件修改样式
微信小程序动态绑定事件并实现事件修改样式实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
JavaScript触发事件大全--能力工场
1.onabort:当用户终止正在打开的网页时产生该事件. 2.onblur:某元素失去活动焦点时产生该事件.例如鼠标在文本框中点击后又在文本框外点击时就会产生. 3.onchange:当网页上某元素 ...

JavaScript动态绑定事件

什么是动态绑定事件？

动态绑定无法触发js的案例？

处理动态绑定失效的方法

JavaScript动态绑定事件相关推荐

最新文章

热门文章