首页 web前端 js教程 关于innerHTML后丢失动态绑定的EVENT问题解决方法_javascript技巧

关于innerHTML后丢失动态绑定的EVENT问题解决方法_javascript技巧

May 16, 2016 pm 05:33 PM
event 动态绑定

用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,如:
html:

复制代码 代码如下:

点击


script:
复制代码 代码如下:

document.getElementById('d1').onclick=function(){alert(1)};
var html=document.body.innerHTML;
document.body.innerHTML=html;

这段代码执行后点击d1是没有任何反应的。
解决方法
把onclick绑定到父元素,利用冒泡原理,判断当前元素是否为d1,若为d1则执行
复制代码 代码如下:

document.body.onclick=function(e){
var e=e||event;
var current=e.target||e.srcElement
if(current.id=='d1'){alert(1)}
}

这也是折中的方法,肯定会影响效率的。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
两个点博物馆:所有展览以及在哪里可以找到它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

Vue中如何进行表单数据的动态绑定和更新 Vue中如何进行表单数据的动态绑定和更新 Oct 15, 2023 pm 02:24 PM

Vue中如何进行表单数据的动态绑定和更新随着前端开发的不断发展,表单是我们经常使用到的一种交互元素。在Vue中,表单的动态绑定和更新是一个常见的需求。本文将介绍Vue中如何进行表单数据的动态绑定和更新,并提供具体的代码示例。一、表单数据的动态绑定Vue提供了v-model指令来实现表单数据的双向绑定。通过v-model指令,我们可以将表单元素的值与Vue实例

PHP8.0中的事件处理库:Event PHP8.0中的事件处理库:Event May 14, 2023 pm 05:40 PM

PHP8.0中的事件处理库:Event随着互联网的不断发展,PHP作为一门流行的后台编程语言,被广泛应用于各种Web应用程序的开发中。在这个过程中,事件驱动机制成为了非常重要的一环。PHP8.0中的事件处理库Event将为我们提供一个更加高效和灵活的事件处理方式。什么是事件处理在Web应用程序的开发中,事件处理是一个非常重要的概念。事件可以是任何一种用户行

Steam 夏季特卖 - Valve 预告 AAA 游戏可享受 95% 的折扣,确认病毒游戏 Palworld 和内容警告的折扣 Steam 夏季特卖 - Valve 预告 AAA 游戏可享受 95% 的折扣,确认病毒游戏 Palworld 和内容警告的折扣 Jun 26, 2024 pm 03:40 PM

Steam 的夏季特卖此前曾举办过一些最优惠的游戏折扣,而今年 Valve 似乎又迎来了另一场全垒打。刚刚发布了一段预告片(请参见下文),其中展示了一些 Steam 夏季特卖折扣游戏。

Python之Pygame的Event事件模块怎么使用 Python之Pygame的Event事件模块怎么使用 May 18, 2023 am 11:58 AM

Pygame的Event事件模块事件(Event)是Pygame的重要模块之一,它是构建整个游戏程序的核心,比如常用的鼠标点击、键盘敲击、游戏窗口移动、调整窗口大小、触发特定的情节、退出游戏等,这些都可以看做是“事件”。事件类型Pygame定义了一个专门用来处理事件的结构,即事件队列,该结构遵循遵循队列“先到先处理”的基本原则,通过事件队列,我们可以有序的、逐一的处理用户的操作(触发事件)。下述表格列出了Pygame中常用的游戏事件:名称说明QUIT用户按下窗口的关闭按钮ATIVEEVENTPy

在JavaScript中,当浏览器窗口调整大小时,这是哪个事件? 在JavaScript中,当浏览器窗口调整大小时,这是哪个事件? Sep 05, 2023 am 11:25 AM

使用window.outerWidth和window.outerHeight事件在JavaScript中获取窗口大小,当浏览器调整大小时。示例您可以尝试运行以下代码来使用事件检查浏览器窗口大小−<!DOCTYPEhtml><html>  <head>   <script>&am

Steam 夏季促销预告片预告 AAA 游戏优惠 95%,确认 Palworld、Stellaris 降价,内容警告 Steam 夏季促销预告片预告 AAA 游戏优惠 95%,确认 Palworld、Stellaris 降价,内容警告 Jun 26, 2024 am 06:30 AM

Steam 的夏季特卖此前曾举办过一些最优惠的游戏折扣,而今年 Valve 似乎又迎来了另一场全垒打。刚刚发布了一段预告片(请参见下文),其中展示了一些 Steam 夏季特卖折扣游戏。

Java中的静态绑定和动态绑定 Java中的静态绑定和动态绑定 Aug 19, 2023 pm 02:57 PM

是的!当编译器知道要用于方法执行的对象时,它可以静态地将引用绑定到对象。例如,静态变量、私有变量和final变量使用静态绑定。而如果需要在运行时进行对象识别,则使用动态绑定。方法重写是动态绑定的一种情况。而方法重载是静态绑定的一种情况。

Vue 中使用 v-bind 实现动态绑定的技巧 Vue 中使用 v-bind 实现动态绑定的技巧 Jun 25, 2023 am 11:02 AM

Vue是一款前端框架,它能够让我们更加方便地开发动态web应用。其中,v-bind是Vue中一个非常强大的指令,它可以让我们动态地绑定HTML上的属性、class、style等。本文将分享一些Vue中使用v-bind实现动态绑定的技巧,希望能够帮助读者更好地使用Vue。一、绑定属性值v-bind最基本的用法就是动态绑定HTML

See all articles