on事件绑定阻止冒泡的问题
当使用on进行事件绑定时当要给document绑定click,而子元素要禁止冒泡,那么子元素里面的子元素的click事件就会无效了,
下面无效版:
$('#queue').on('click', '.link', function() {
var t = $(this)
,box = t.next()
if(t.hasClass('active')) {
box.hide()
t.removeClass('active')
}
else {
box.show()
t.addClass('active')
}
event.stopPropagation()
})
//排队列表收缩
$(document).on('click','body',function(){
$('.link').removeClass('active')
$('.queue-box').hide();
})
$('#queue').on('click','.queue-box',function(){//绑 $('#queue')或 $(document)都一样
event.stopPropagation()
//主要是下面
$(document).on('click','.btn-queue-join',function(){
mywebsocket.send(JSON.stringify({
"action": "patientJoinQueue",
"patientCode": patientCode,
"orderCode": $(this).parents('.item').attr('data-id')
}))
});
//修改$(document)为$('.queue-box')就可以了
$('.queue-box').on('click','.btn-queue-join',function(){
mywebsocket.send(JSON.stringify({
"action": "patientJoinQueue",
"patientCode": patientCode,
"orderCode": $(this).parents('.item').attr('data-id')
}))
});
参考http://www.cnblogs.com/tengj/p/4794947.html对其进行了理解
暂时没空后面补理解
on事件绑定阻止冒泡的问题的更多相关文章
- 微信小程序~事件绑定和冒泡
[1]事件绑定和冒泡 事件绑定的写法同组件的属性,以 key.value 的形式. key 以bind或catch开头,然后跟上事件的类型,如bindtap.catchtouchstart.自基础库版 ...
- jQuery--事件, 事件绑定, 阻止事件冒泡, 事件委托,页面载入后函数
1.常用事件, 按住shift键实现同步选择效果,搜索框联想效果 2.阻止事件冒泡 3.事件委托 4.使用 $(document).ready(function (){...}) 实现文件加载完绑定事 ...
- on绑定阻止冒泡失败
使用zepto库,有如下dom <div id="J_parent"> <a href="#"> <span>点我有惊喜&l ...
- 在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
- javascript的阻止默认事件和阻止冒泡事件
这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为 在说事件冒泡之前 ...
- JS点击子元素不触发父元素点击事件(js阻止冒泡)
js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
- (O)阻止默认事件和阻止冒泡的应用场景
场景1:阻止默认事件 比如这样的一个需求 点击取消a标签按钮的时候会触发一些js动作,但是不能让这个a标签产生跳转行为, 所以需要在点击取消的时候 阻止冒泡,防止其跳转. <a id='ca ...
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
转自:http://blog.csdn.net/itchiang/article/details/7769341 添加事件 var addEvent = function( obj, type, ...
随机推荐
- 浅谈DevExpress<四>:TreeList中的拖拽功能
本篇要实现的目标,简单来说就是把一个treelist的节点用鼠标拖到另外的节点(自身或其他的listview)上,如下图: 1
- Binder机制,从Java到C (10. Binder驱动)
Binder驱动的代码都在kernel里面,这里就简单讲一下里面涉及到的几个东西: 1.MemoryBinder其实本质上就是一中数据传输方式,这种方式是通过binder driver实现的. 我们知 ...
- 由link()和symlink()谈到软链接与硬链接
任何一个文件可以有多个目录项指向其i节点.创建一个向现存文件连接的方法是使用l i n k函数. #include <unistd.h> int link(const char * e x ...
- Helper Method
ASP.NET MVC 小牛之路]13 - Helper Method 我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 Sys ...
- hdu 2159
二维背包,dp[i][j]表示忍耐度为i,且还可以杀j个怪时能获得的最大经验值 dp[i][j]=max(dp[i][j],dp[i-r[k]][j-1]+e[k]),r[k]为杀死第k种怪掉的忍耐度 ...
- .NET4.5 Console.ReadKey()在多线程下的BUG
.NET 4.5 在多线程的控制台里,Console.ReadKey()可能会造成线程死锁.看代码: static void Main(string[] args) { System.Timers.T ...
- UML和模式
UML和模式应用学习笔记-2(迭代和进化式开发) 一:什么是迭代和进化式开发 1:迭代和进化式开发:通常会在还没有详细定义所有需求的情况下假设开发开始,同时使用反馈来明确和改进演化中的规格说明: ...
- office文件的预览
使用FlexPaper实现office文件的预览(C#版) 需求很简单,用户上传office文件(word.excel.ppt)后,可以预览上传的这些文件.搜索的相关的资料后.整理如下: Step1. ...
- 联想E430Cwindow8系统换成win7
垃圾win8系统各种不习惯,尤其无线网络老是自己断掉,忍无可忍只能换成win7,之前换过一次,没有成功,记得是提示硬盘模式要由GPT换成MBR. 这次换系统采用了PE里直接分区,格式化所有数据,然后g ...
- C# 对象池的实现
C# 对象池的实现 对象池服务可以减少从头创建每个对象的系统开销.在激活对象时,它从池中提取.在停用对象时,它放回池中,等待下一个请求.我们来看下主线程中,如何与对象池打交道: static void ...