首页 > 其他分享 >jQuery绑定动态元素的点击事件无效

jQuery绑定动态元素的点击事件无效

时间:2024-03-12 20:34:07浏览次数:34  
标签:jQuery 绑定 元素 点击 事件 动态 加载

原文链接:https://blog.51cto.com/u_15142266/2680137

之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明。

通过运行以上代码,就会发现动态生成的标签事先绑定的点击事件点击了没反应。总结一下,推测上面这个监听函数,是在网页加载的时候就指定了对象,而通过代码追加,如通过js追加的元素,是不能匹配这个事件的。那么,我们应该使用什么来绑定动态元素呢,支持给动态元素和属性绑定事件的是live和on,其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on,使用on的时候也要注意,on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等,可以放在on的第二个参数里面。

正确示范:

 

标签:jQuery,绑定,元素,点击,事件,动态,加载
From: https://www.cnblogs.com/Dongmy/p/18069209

相关文章

  • 【Lazy ORM】 小工具 acw 本地客户端 你负责点击页面,他负责输出代码
    介绍wu-smart-acw-client简称acw-client,是一个基于LazyORM定制的客户端代码生成小工具LazyORM小工具acw本地客户端你负责点击页面,他负责输出代码安装<dependency><groupId>top.wu2020</groupId><artifactId>wu-smart-acw-cli......
  • js 实现点击下拉滚动
    在JavaScript中实现点击下拉菜单后滚动到特定位置,通常用于导航栏的下拉菜单或对话框内容的自动滚动等场景。以下是一个简单的示例:假设我们有一个HTML结构,包含一个可点击的元素(如按钮)和一个需要滚动的下拉列表:<buttonid="dropdown-toggle">点击打开下拉菜单</button><div......
  • 一文搞懂Vue的MVVM模式与双向绑定
    v-model是Vue.js框架中用于实现双向数据绑定的指令。它充分体现了MVVM(Model-View-ViewModel)模式中的双向数据绑定特性。下面我们将详细解释v-model如何体现MVVM和双向绑定:1.MVVM模式MVVM模式是一种软件架构设计模式,它将应用程序分为三个部分:Model(模型):代表应用程序的......
  • Angular 我在点击了上一页或者下一页方法之后,重新加载渲染数据。为什么还需要再点击一
    在你的TypeScript代码中,当调用nextPage_TopSelling()或prevPage_TopSelling()方法时,虽然你更新了currentPage_TopSelling的值并调用了reloadTopSelling()方法,但是Angular并不会自动检测到这些变化并重新渲染页面。这是因为Angular的变化检测机制是基于异步的,在一些......
  • jQuery入门
    jQuery入门基本概念:jQuery是一个快速,小型且功能丰富的JavaScript库。借助易于使用的API(可在多种浏览器中使用),使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单。个人理解:jQuery是js的一个库,本质就是封装好的js函数,可以和javascript一起使用,使用jQuery可以简化开发1......
  • vue3 监听鼠标点击拖动事件,移动端滑动事件,页面指针坐标事件
    PointerEventsAPI是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。Pointer指可以在屏幕上反馈一个指定坐标的输入设备。PointerEvent事件和TouchEventAPI对应的触摸事件类似,它继承扩展了TouchEvent,因此拥有TouchEven......
  • Jquery学习1
    一.jquery中prototypejavascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。每一个构造函数都有一个属性叫做原型。这个属性非常有用:为一个特定类声明通用的变量或者函数。prototype是一个对象,因此,你能够给它添加属性。你添......
  • 鼠标点击特效
    引号内可更改自己喜欢的内容/*鼠标特效*/vara_idx=0;jQuery(document).ready(function($){$("body").click(function(e){vara=newArray("❤野原新之助❤","❤野原广志❤","❤野原美伢❤","❤野原小白❤","❤野原向日葵❤","❤风间❤&......
  • jQuery中使用箭头函数,调用$(this)失效?
    1.问题在jQuery中使用箭头函数,最后调用$(this)发现无效?$(function(){//鼠标经过$('.nav>li').mouseover(()=>{//$(this)jQuery当前元素this不要加引号//show()显示元素hide()隐藏元素$(this).children('ul').show();}......
  • 高德地图api标记点和线段重合点击响应问题
    问题现象:现在地图上放置了line和marker,marker在line的上层显示这时line和marker同时存在,当line和marker有重合部分并点击重合点时,只响应line对应的click事件,而位于下方的line无法响应对应的click事件如图:原因:点击事件被上层的marker阻挡,marker并未注册点击事件解决方案在am......