解决jquery appaend元素中id绑定事件失效的问题

1. 在jquery中append元素，如果该元素中有id值并且绑定事件，那么该id事件会失效，必须刷新一下才能使用。

2.解决办法：

举例：如果在一个<div class="title"></div>中，通过append添加一个id="demo"的按钮，常用的直接$("Selector").on("eventType",function(){})监听事件函数不起作用，例如该按钮的点击监听事件应该这样写：

$(".title").on("click", "#demo", function(){});

以上这篇解决jquery appaend元素中id绑定事件失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jquery 新建的元素事件绑定问题解决方案

    js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现.而事件监听不是,你必须给每一个元素单独绑定事件. 常见的例子是处理表格的时候.每行行末有个删除按钮,点了这个能够删除这一行. 复制代码 代码如下: <table> <tbody> <tr> <td>这行原来就有</td> <td><buttonclass="del">删除</button>&l

  • jquery绑定事件不生效的解决方法

    今天在开发前台页面时发现jquery绑定click事件,怎么都不生效.代码如下: 1.html:<input id="ceshisub" type="button" value="单击事件" > 2.html引用的test.js中的方法函数: 复制代码 代码如下: $("#ceshisub").bind("click",function(){ var a=1; a +=1; alert(&quo

  • jQuery事件绑定与解除绑定实现方法

    本文实例讲述了jQuery事件绑定与解除绑定实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name=

  • 解决jquery appaend元素中id绑定事件失效的问题

    1. 在jquery中append元素,如果该元素中有id值并且绑定事件,那么该id事件会失效,必须刷新一下才能使用. 2.解决办法: 举例:如果在一个<div class="title"></div>中,通过append添加一个id="demo"的按钮,常用的直接$("Selector").on("eventType",function(){})监听事件函数不起作用,例如该按钮的点击监听事件应该这样写

  • jQuery中on绑定事件后引发的事件冒泡问题如何解决

    用on绑定时,我把子元素的 绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效. <!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

  • jQuery判断元素上是否绑定了指定事件的方法

    本文实例讲述了jQuery判断元素上是否绑定了指定事件的方法.分享给大家供大家参考.具体如下: 例如下面的代码可以判断id=testdiv的元素是否绑定的click事件,这个判断只针对jQuery绑定的事件有效,普通JS的事件绑定无效. //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#testdiv").data("events"); if( $events &&

  • jQuery动态添加元素无法触发绑定事件的解决方法分析

    本文实例讲述了jQuery动态添加元素无法触发绑定事件的解决方法.分享给大家供大家参考,具体如下: 最近遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件.后来在网上查阅了一些资料,发现原来要这样处理: 先上我出错的代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></ti

  • 关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • jQuery自定义元素右键点击事件(实现案例)

    大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进.右键后退. 第一步我们要屏蔽浏览器默认的右键点击行为,即阻止弹出框. 首先要将阻止弹出函数绑定到目标元素上: //阻止浏览器默认右键点击事件 $("div").bind("contextmenu", function(){ return false; }) 如此一来,div元素的右击事件就被屏蔽了,而浏览器其

  • jquery利用命名空间移除绑定事件的方法

    jquery利用命名空间移除绑定事件的方法

    本文实例讲述了jquery利用命名空间移除绑定事件的方法.分享给大家供大家参考.具体分析如下: 最近研究jquery,发现了一个简单移除绑定事件的方法,命名空间. 例子很简单. 这里我绑定了三个事件,分别是click,mouseover和dblclick事件 其中click和mouseover事件我加入了命名空间,而dblclick没有加入命名空间. 利用一个button移除了绑定的事件. 这样避免了重复的使用bind和unbind方法,让你的代码看起来更简洁明了. 复制代码 代码如下: <sc

  • 完美解决UI-Grid表格元素中多个空格显示为一个空格的问题

    UI-Grid中表格数据中如果存在多个连续的空格,会显示为一个空格,解决方法很简单,只需要加上这样一个样式: .ui-grid-cell-contents { white-space: pre !important; } white-space 属性设置如何处理元素内的空白. pre:  空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. 以上这篇完美解决UI-Grid表格元素中多个空格显示为一个空格的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多

  • 浅谈vue中组件绑定事件时是否加.native

    组件绑定事件时 1. 普通组件绑定事件不能添加.native, 添加后事件失效 2. 自定义组件绑定事件需要添加.native, 否则事件无效 <template> <!-- <mt-field label="用户名" placeholder="请输入用户名"></mt-field> --> <input type="text" @keyup.native="show($event)

  • 解决element-ui的el-select选择器的@blur事件失效的坑

    目录 element-ui的el-select选择器的@blur事件失效 解决 使用el-select中的@blur遇到的问题 解决 element-ui的el-select选择器的@blur事件失效 element-UI文档中本来el-select有个blur事件绑定函数属性. 但是使用后发现有时候失焦事件并不能触发生效,也就导致所绑定的函数不能执行. 解决 利用el-select的@focus方法,在select标签内 添加 ref 于此便可在focus事件内触发 blur事件. 代码如下:

随机推荐