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 ...
随机推荐
- django数据库读写分离
django数据库读写分离 1. 配置数据库 settings.py文件中 用SQLite: DATABASES = { 'default': { 'ENGINE': 'django.db.backe ...
- C++ 操作数据库类
#pragma once #include <string> #include <windows.h> #include <algorithm> #include ...
- 对自己有用的VS调试技巧
设置下一条语句 编辑然后继续 符号越界后查看堆对象 查看数组的值 底部 设置下一条语句 返回顶部 一个典型的调试情况就是通过单步跟踪分析为什么一个函数调用失败了.当你发现一个函数调用的另一个函数返回错 ...
- gcc编译出现:error: invalid operands to binary & (have ‘char *’ and ‘int *’)
/************************************************************************* > File Name: ptr_varia ...
- header() 被用来发送自定义的 HTTP 报文
header() 被用来发送自定义的 HTTP 报文.关于HTTP报文的更多信息请参考» HTTP/1.1 specification. 请注意一点header()必须在任何实际输出之前调用,不管是普 ...
- 吴裕雄--天生自然 PHP开发学习:魔术常量
<?php echo '这是第 " ' . __LINE__ . ' " 行'; ?> <?php echo '该文件位于 " ' . __FILE__ ...
- MyBatis从入门到精通(第4章):MyBatis动态SQL【foreach、bind、OGNL用法】
(第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...
- JQuery局部刷新与全页面刷新
局部刷新: 这个方法就多了去了,常见的有以下几种: $.get方法,$.post方法,$.getJson方法,$.ajax方法如下 前两种使用方法基本上一样 $.get(”Default.php”, ...
- Java常用面试题总结
1.多线程实现方式 2.cookie和session区别 3.数据加密 4.接口并发 5.常用的集合类 6.遍历集合方式 7.接口和抽象类 8.#和$区别 9.防止sql注入 10.springMvc ...
- TechEmpower 框架性能测试数据 - 新解读
1. TechEmpower Framework Benchmark 介绍 TechEmpower 框架性能大比拼平台从 2013 年 3 月开始以来已经历经了 18 轮测试,参与这个平台的框架平台产 ...