mui 左侧选项卡-div模式 的选项卡切换监听

使用$('#segmentedControls').on('change', '.mui-control-item', function () { })和 document.getElementById("segmentedControls").addEventListener('.mui-control-item', function (e) {}) 都没有效果
后来使用querySelectorAll(".mui-control-item") 方法取所有类命为mui-control-item的元素,但是需要注意的是使用 querySelectorAll(".mui-control-item") 获取的是 数组,数组不能使用 addEventListener 需要遍历监听事件
所以不能写成querySelectorAll(".mui-control-item").addEventListener('tap', function (e) { })
而应该这样写:
document.querySelectorAll(".mui-control-item").forEach(function(item){
item.addEventListener('tap', function () {
//此处写需要实现的功能
})
})
问题解决。
mui 左侧选项卡-div模式 的选项卡切换监听的更多相关文章
- 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件
js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...
- local-语言切换监听事件
今天在更改时钟的问题的时候,需要监听语言切换来刷新时钟的显示.记录下监听方法 //注册监听事件 intentFilter.addAction(Intent.ACTION_LOCALE_CHANGED) ...
- mui日期插件$, each遍历,EventListener事件监听,json格式
(function($) { $.init(); var result = $('#result')[0]; var btns = $('.btn'); btns.each(function(i, b ...
- JS监听div的resize事件
原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...
- Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的?
构成ASP.NET Web API核心框架的消息处理管道既不关心请求消息来源于何处,也不需要考虑响应消息归于何方.当我们采用Web Host模式将一个ASP.NET应用作为目标Web API的宿主时, ...
- 监听某个div或其它标签的大小改变来执行相应的处理
jquery 默认的resize只能监听到浏览器窗口大小的改变,但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize就无能为力了.怎么办呢, ...
- 监听页面中的某个div的滚动事件,并将其滚动距离保存到cookie
在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type ...
- MUI框架-12-使用原生底部选项卡(凸出图标案例)
MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...
- 监听导航新增Tab选项卡-layui
1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...
随机推荐
- Redis: Reducing Memory Usage
High Level Tips for Redis Most of Stream-Framework's users start out with Redis and eventually move ...
- 一名资深架构师规划Java程序员五年职业生涯指南
每个程序员.或者说每个工作者都应该有自己的职业规划,如果你不是富二代,不是官二代,也没有职业规划,希望你可以思考一下自己的将来.今天我给大家分享的是一篇来自阿里大牛对五年工作经验程序员的职业建议,希望 ...
- kubelet组件详解---链接
https://blog.csdn.net/jettery/article/details/78891733
- [转]分析zookeeper能做什么
Zookeeper是hadoop的一个子项目,虽然源自hadoop,但是我发现zookeeper脱离hadoop的范畴开发分布式框架的运用越来越多.今天我想谈谈zookeeper,本文不谈如何使用zo ...
- Windows如何设置指定的IP走专线?
很多时候在工作中难免有多重网络环境的情况,为了方便之间的互访,可能会用的VPN等虚拟专线,作为网络管理员,route命令是必会的基础技能. 我们一般连接到专线vpn以后,默认会启用远程网关,这样我们所 ...
- Cpp:"->"和"."的区别
environments:gcc version 8.1.0 (x86_64-posix-seh-rev0, Built by MinGW-W64 project) class data{ publi ...
- h5-边框图片
1.边框图片详解 <style> *{ ; ; } div{ width: 900px; height: 900px; margin: 100px auto; border: 133px ...
- spring学习之依赖注入DI与控制反转IOC
一 Ioc基础 1.什么是Ioc? Ioc(Inversion of Control)既控制反转,Ioc不是一种技术,而是一种思想,在Java开发中意味着将设计好的对象交给容器来进行控制,并不是像传统 ...
- 01 语言基础+高级:1-2 面向对象和封装_day06【类与对象、封装、构造方法】
day06[类与对象.封装.构造方法] 面向对象类与对象三大特征——封装构造方法 能够理解面向对象的思想能够明确类与对象关系能够掌握类的定义格式能够掌握创建对象格式,并访问类中的成员能够完成手机类的练 ...
- List和Map集合详细分析
1.Java集合主要三种类型(两部分): 第一部分:Collection(存单个数据,只能存取引用类型) (1).List :是一个有序集合,可以放重复的数据:(存顺序和取顺序相同) (2).Set ...