首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery——动态添加元素导致点击事件失效

前言 因为博皮当前版本有人反馈文章中标题导航点击无法生成; jquery-click-invalid: https://codesandbox.io/s/jquery-click-invalid-forked-xpt352...内容 一开始我以为是svg导致的点击事件失效,但是看来下代码结构,发现两者并不关联; 开始觉得问题应该出现在.html()方法上,因为文章这块在博皮上是没做什么调整的,所以直接看博客园的blog-common.min.js...; 通过显示目录导航关键字进行搜索,就发现了关键之处,JQuery动态的添加元素,导致事先绑定的click事件失效了,因为.click只适用于静态元素; ?...> 既然问题找到了,那修复起来就很快了; 因为我们无法改变blog-commom.min.js,所以通过改变自己博皮代码进行修复; 原来代码 通过.html()进行组合,这样导致button对应的click...事件失效; /** * 设置文章标题-iconfont */ (() => { let titleInfo = $('#cnblogs_post_body

13510
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    javascript对点击事件和拖动事件的区分

    1.项目中,为了更好的服务用户,经常会设计一个便捷的通道,这个通道一般都是“悬浮”的。...由于是悬浮的,那么就会考虑用户会出现哪几种可能的操作,一个是直接点击,另外一种就是在屏幕上先拖动几下,然后再点击。 那么为了完美的实现这个需求,那么该怎么办呢?...最重要的就是要区分点击事件和拖动事件。 我们都知道,点击事件是被点击的对象可看做是静止不动的,而拖动事件的对象很明显是移动的。...那么思路就应该是先判断事件对象是否有移动的现象, 但是由于不管是在点击事件和拖动事件,其都有一个鼠标按下的一个过程和一个松开的过程,只不过拖动事件多了一个拖动动作。...= null;   //先设置一个定时器处理; var isDrag = false;             //声明拖动的默认状态是:否 //创建目标被点击(鼠标按下)的函数 function entranceDivDown

    5.2K30

    RecyclerView | 处理 RecyclerView 中的点击事件

    本文是介绍 RecyclerView 入门 系列文章 的第三篇。如果您已经对创建 RecyclerView 有了一定的认识,请继续阅读本文。如果尚未熟悉,建议您首先阅读本系列中的 第一篇文章。...当使用 RecyclerView 显示列表数据的时候,您可能需要响应列表元素的点击事件。该响应处理包括: 打开包含更多数据的页面、显示 toast、删除某个元素等等。...相关的响应事件虽然数不胜数,但是它们均需要通过 onClick() 来实现。 定义点击动作 在创建监听器之前,在 Activity 类中添加一个函数用于处理点击之后的响应操作。 <!...) : ListAdapter(FlowerDiffCallback()) 在 Activity 类中,在初始化 Adapter 的时候传入刚刚创建的点击事件函数...现在您的 RecyclerView 可以响应点击事件了。 编程快乐! 下一步 请查阅包含 onClick() 的 完整示例。 感谢您阅读 RecyclerView 系列 文章的第三篇。

    2.2K10

    点击事件的四种写法

    比如某个列表的adapter中,构造方法需要传入某个List data, 那么以后需要进行data的非空判断么,我看到某个开源项目判断了,觉得有点多此一举。...谁会在构造方法中传入一个null啊 面条: 如果Adapter最开始初始化的时候还没有数据 推荐写法是传一个new ArrayList,尽量别传null,还要去做空值判断,很麻烦的好吗。...仗剑行侠: 个人理解,应该没有区别,即便你就是通过匿名内部类实现,你的控件的是否可以用,也是取决于activity的生命周期啊。...,不用每次点击都获取 EditText获取到的值进行trim()去掉空格 判断号码是否为空android提供的工具类 TextUtils.isEmpty(); 提示信息Toast Toast.makeText...,每个按钮都要设置点击事件,其他方法会创建很多内部类,利用这种方法进行判断 //第三种方法,Activity实现接口方法 bt_dail.setOnClickListener(this)

    67130

    Android listView中的button点击事件

    又如何在点击button时定位当前的item?...在listview中的listitem设置事件响应,如果listitem中有button控件,这时候listitem就不会捕获到点击事件,而默认的是listitem中的button会捕获点击事件。...通过此方法可以实现:在listitem中初始化button的时候,给该button添加一个setTag方法,将此时的索引值传进去,然后在button的onclick事件中调用view的getTag方法,...mButton.setTag(position); //此处的mButton就是定义的button,Position是view里边的位置 2,监听click事件的时候,position就是点击button...:android中在Activity中响应ListView内部按钮的点击事件的两种方法_今人不见古时月,今月曾经照古人的博客-CSDN博客 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn

    2.3K10

    Android连续点击多次事件的实现

    有时候我们需要实现这样的场景,类似进入开发者模式,即多次点击后执行操作。 首先我们先看一个方法: System提供的一个静态方法arraycopy(),我们可以使用它来实现数组之间的复制。...1000;// 规定有效时间 long[] mHits = new long[COUNTS]; 首先我们定义次数,规定的有效时间,还有对应的数组,即我们要在一秒钟内点击4次才有效 @Override...4次", Toast.LENGTH_LONG).show(); } } 思路:首先我们点击的时候都将数组向左移动一位,将时间赋值给最后一位,从上面的代码中我们可以看出当我们点击了四次...SystemClock.uptimeMillis():手机开机到现在的时间。...注意:执行操作后需要从新初始化数组:mHits = new long[COUNTS];否则点击第六次第七次的时候也会触发事件。

    1.3K20

    element 输入框点击事件_ElementUI的input事件问题

    最近用ElementUI的el-input组件,然后发现一个问题, 就是我在输入框后,加一个icon的button, 然后我希望这个输入框可以触发两个事件, 第一个是,输入完,按键盘回车键的事件, 第二个是...,输入完,点icon的button的click事件。...然后翻阅文档,发现可以给input加@change事件,这样按回车可以搜索,然后可以把icon的button写成slot的方式然后给button加@click事件,这样按钮也能搜索。...这个时候我们想一下,用户按了回车,change事件触发,这没问题。 但是用户如果输入完,鼠标点右边的icon的button。。。完了。。。...这change(因为失焦)和click(因为点击了button)一起触发。。我特么。。。我人都傻了。。这什么鬼设定。。 有没有大佬有办法的,我感觉这个change带失焦好恶心。。

    3.6K20

    vue 界面在苹果手机上滑动点击事件等卡顿解决方案

    用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题,(1)....滑动页面卡顿,(2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟。...一.滑动页面卡顿 //页面布局 页面内容 在对应的组件的最外层div上加上这样的样式....点击事件响应缓慢 (1).安装fastclick (npm install fastclick -S) (2).在main.js中设置方法 import FastClick from 'fastclick...' FastClick.attach(document.body); 在引入fastclick之后,虽然页面事件快了很多,但是会有一个副作用:input输入框需要连续点击两次或者长按才能获取焦点,真是到处是坑啊

    1.8K30

    layui upload上传控件动态加载后点击失效的处理

    本文链接:https://blog.csdn.net/u011415782/article/details/95601001 背景 今天遇到的情况是,在我的业务需求里,根据商品SKU信息,动态生成一个表格...然后,每行有一个需要上传缩略图的 upload控件 但是,最后发现点击没反应 场景如下: ?...分析 通过参考网友的解释,需要在动态生成数据后,要补充 upload.render() 注:本人的layui版本为: layui-v2.2.45 (不排除低版本不支持的情况哦) 解决方法:...附录: 注意是补充 upload.render() 整体代码,个人测试,只是补充一句 layui.upload.render() 是无效的 个人觉得这样是不合理的 如此一来,对于添加操作和修改操作...,可能需要重复使用同一段代码,造成冗余 可惜,没找到其他的解决方法 …

    6.1K30

    笔记31 | 归纳总结Android的点击事件

    点击的其他方式 onClick用于响应从按下到松开间隔时间较短的点击事件,onLongClick用于响应从按下到松开间隔时间较长的点击事件,间隔时间阈值大约在1-2秒之间。...对话框按钮点击 对话框的点击事件其实就是按钮点击,只是对话框上有多个按钮,所以需要分别注册监听器,分别响应点击事件。...,点击的位置是-->" + position, Toast.LENGTH_SHORT).show(); } 4.2 导航项点击a、下拉导航项的点击事件,导航模式需设置为...return true; } }); b、标签导航项的点击事件,导航模式需设置为ActionBar.NAVIGATIONMODETABS,用于响应具体标签页的选中事件...物理按键点击 android手机除了位于中间的Home主页键,还有左边的菜单键,右边的返回键。按下菜单键,屏幕上弹出该页的Menu菜单(如果有定义的话)。

    1.5K80

    移动浏览器点击事件的问题

    大家都知道移动端的程序中,是没有点击事件的,只有 touchstart、touchmove、touchend。...利用jquery这样写的话,也可以,但是当你点击按钮的单击事件时,将 会等待大约300ms的时间。这是因为,浏览器是等着看,如果你是真正执 行双击。...如下代码所示,就会延时300ms: $("#sid").click(function(){ console.log(111); }); ps:在移动浏览器端,你会发现,当你点击某个区域的点击事件时...tap就是按两下, triple就是三下哈哈哈~~~ 解决方案:(2)使用FastClick插件 地址:http://www.uedsc.com/fastclick.html 解决方案:(3)点击和滑动之间有一个本质的区别就是...touchmove(mousemove),在手机端,只需要判定是否触发这一点即可: var flag = false; var $selector = $('#selectorID'); $selector.on

    82930
    领券