Js 监听器
在Ajax取数据时,采用$("#id").click(function(){})的方式不能正确设置监听,需要用$("#parent").on("click","id", function(){});
参考文章:
版权声明:本文为CSDN博主「花2不谢」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_25821067/article/details/74537973
本文主要介绍了解决给dom元素绑定click等事件无效问题的方法。具有很好的参考价值,下面跟着小编一起来看下吧
之前一直遇到js插件生成的元素,click事件无效的问题,重新绑定也不行,终于找到解决方法,在此记下来。
同时加深对js事件处理机制的理解。
1. 事件被解绑
这种情况下一般不会导致click失效,但以下情况,click事件就失效了:
$(function(){
$('.btn').unbind()
})
$('.btn').click(function(){
//...
})
所以,click事件要有个好习惯:
$(function(){
$('.btn').click(function(){
//...
})
})
2. js插件异步/动态加载dom
一般含有等待时间/开始运行时间:WaitTime
此时直接绑定/监听无效:
$(function() {
$('.container .btn').on('click',
function() {
//...
})
})
解决方法1:
$(function() {
setTimeout(function {
$('.container .btn').click(function() {
//...
})
//.btn 加载后事件
},
WaitTime)
})
解决方法2(事件委托,即委托给父元素):
$(function() {
$('.container').on('click', '.btn',
function() {
//...
})
})
3. ajax 异步加载的dom
可以在done()函数体中加click事件
同2中的事件委托方法。
4. 点击链接无反应
以下代码会导致a标签有href也无法跳转
$(function() {
$('a').on('click',
function(e) {
e.preventDefault()
//...
})
})
解决方法:
$(function(){
$('a').on('click',function(e){
e.preventDefault()
//...
})
$('a').unbind()
})
小结
1.事件绑定,事件监听,事件委托 相关链接
2.事件捕获与冒泡 相关链接
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
事件捕获
父元素先发生,子元素后
事件冒泡
子元素先发生,父元素后
Js 监听器的更多相关文章
- Node.js 学习(六)Node.js EventEmitter
Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.read ...
- Javascript和jquery事件--事件监听器
之前看完了js和jq的冒泡捕获和事件对象event,这里看看同时使用js和jq后我最容易混淆的监听器的绑定. (1) js的监听器绑定解绑 绑定监听器有两种方式: a.on-事件type,比如oncl ...
- BOOM -- 智能合约编程
译注:原文首发于ConsenSys开发者博客,原作者为Eva以及ConsenSys的开发团队.如果您想要获取更多及时信息,可以访问ConsenSys首页点击左下角Newsletter订阅邮件.本文的翻 ...
- mvvm的初步思想
1.Object.defineProperty(obj,key,desc); 用法:1.给对象新增属性和特性 2.修改对象属性值和特性 desc(属性特性): 1.enumerable:boolean ...
- nodejs events
EventEmitter类 events模块提供一个对象:events.EventEmitter,核心是事件触发和事件监听的封装. 大多数时候不会直接使用EventEmitter,而是在对象中继承它( ...
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- js事件监听器用法实例详解-注册与注销监听封装
本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分析如下: 1.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉,也就是说,在对象的onclick事 ...
- 使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径
使用监听器解决路径问题,例如在jsp页面引入js,css的web应用路径 经常地,我们要在jsp等页面引入像js,css这样的文件,但是在服务器来访问的时候,这时间就有关到相对路径与绝对路径了.像网页 ...
- JS事件监听器
JS事件监听器 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Javasc ...
随机推荐
- IDEA intellij 引用jar包方法
以下为方法之一. 1. 点击左上角文件 - Project Structure 2. 依次按照下图点击 3. 选择需要导入的jar包,点击ok
- kettle 数据抽取时会出现 无法插入NULL
kettle 数据抽取时会出现 无法插入NULL,其实是空字符串,原因是kettle默认不区分空字符串和NULL. 解决办法: 修改kettle.properties 文件:
- 数据结构与算法——常用排序算法及其Java实现
冒泡排序 原理:依次比较相邻的两个数,将小数放在前面(左边),大数放在后面(右边),就像冒泡一样具体操作:第一趟,首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数,将小数放前 ...
- sheet.getRow(rowIndex);为null_POI导出excel
第一次使用POI,出现这个问题,看到有其他猿也遇到过,不知道怎么处理,所以记录一下~ sheet.getRow(rowIndex);通过sheet获取指定行,rowIndex代表第几行 用rowInd ...
- Python实现JSON生成器和递归下降解释器
Python实现JSON生成器和递归下降解释器 github地址:https://github.com/EStormLynn/Python-JSON-Parser 目标 从零开始写一个JSON的解析器 ...
- 查看nginx服务器状态
编译安装时使用--with-http_stub_status_module开启状态页面模块 [root@proxy ~]# yum -y install gcc pcre-devel openssl- ...
- HDU 5863 cjj's string game ( 16年多校10 G 题、矩阵快速幂优化线性递推DP )
题目链接 题意 : 有种不同的字符,每种字符有无限个,要求用这k种字符构造两个长度为n的字符串a和b,使得a串和b串的最长公共部分长度恰为m,问方案数 分析 : 直觉是DP 不过当时看到 n 很大.但 ...
- 【线性代数】4-3:最小二乘近似(Least Squares Approximations)
title: [线性代数]4-3:最小二乘近似(Least Squares Approximations) categories: Mathematic Linear Algebra keywords ...
- OSI七层参考模型
一.OSI七层模型简述 二.每层的作用 三.数据封装的过程 四.数据解封的过程
- 在linux操作系统上进行简单的C语言源码的gcc编译实验
尝试在linux上用gcc 而非封装完好的codeblocks,vs等ide 来编译c和cpp源程序 首先查看我的gcc版本,我的是VM centos 自带的,没有的话得自行安装,安装上gcc就可以在 ...