使用$('#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模式 的选项卡切换监听的更多相关文章

  1. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  2. local-语言切换监听事件

    今天在更改时钟的问题的时候,需要监听语言切换来刷新时钟的显示.记录下监听方法 //注册监听事件 intentFilter.addAction(Intent.ACTION_LOCALE_CHANGED) ...

  3. mui日期插件$, each遍历,EventListener事件监听,json格式

    (function($) { $.init(); var result = $('#result')[0]; var btns = $('.btn'); btns.each(function(i, b ...

  4. JS监听div的resize事件

    原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...

  5. Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的?

    构成ASP.NET Web API核心框架的消息处理管道既不关心请求消息来源于何处,也不需要考虑响应消息归于何方.当我们采用Web Host模式将一个ASP.NET应用作为目标Web API的宿主时, ...

  6. 监听某个div或其它标签的大小改变来执行相应的处理

    jquery 默认的resize只能监听到浏览器窗口大小的改变,但我们在实际使用过程中有可能还需要监听某个div或其它标签的大小改变来执行相应的处理,如果使用默认的resize就无能为力了.怎么办呢, ...

  7. 监听页面中的某个div的滚动事件,并将其滚动距离保存到cookie

    在html中,写一个id为type的div: <div class="type" id="type"></div> css: .type ...

  8. MUI框架-12-使用原生底部选项卡(凸出图标案例)

    MUI框架-12-使用原生底部选项卡(凸出图标案例) 今天,用 mui 做 app 时,遇到了可能各位都遇到过的头疼问题:底部中间图标凸起,如下图: 最后有源代码 [提示]:有人问我在 HBuilde ...

  9. 监听导航新增Tab选项卡-layui

    1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...

随机推荐

  1. MyBatis:一对多、多对一处理

    多对一的处理 多对一的理解: 多个学生对应一个老师 如果对于学生这边,就是一个多对一的现象,即从学生这边关联一个老师! 数据库设计 CREATE TABLE `teacher` ( `id` INT( ...

  2. [XNUCA2019Qualifier]EasyPHP

    0x00 知识点 预期解中知识点: htaccess生效 如果尝试上传htaccess文件会发现出现响应500的问题,因为文件尾有Just one chance 这里采用# \的方式将换行符转义成普通 ...

  3. Neo4j--常用的查询语句

    参考 https://www.w3cschool.cn/neo4j 准备工作 插入一堆朝代节点 插入我大明皇帝节点 创建大明皇帝统治大明王朝的关系 看一下结果 WHERE WHERE 语法 WHERE ...

  4. JS-语句二

    for循环的4个要素: 1.初始值        2.条件判断        3.状态改变        4.循环体 for循环的写法: for(var i=0;i>10;i++)        ...

  5. 2.3 使用Android Studio 简单设计UI界面

    首先 创建一个新的项目找到app 文件目录下的layout的 activity_main.xml 因为Android Studio 是可视化的,所有操作都可以在图形界面进行. 该res 界面当中  d ...

  6. java8+tomcate8仅支持TLSv1.2

    1.编辑$tomcat_home/conf/server.xml <Connector protocol="org.apache.coyote.http11.Http11NioProt ...

  7. Java--Excel操作

    public static List<Info> readXml(String fileName, Map<String, Fuck> pcMap) throws Except ...

  8. nginx下第一次使用thinkphp5遇到的坑

    最近面试php很多都在问会不会tp5所以借机了解了一下,刚在本地搭建了个就遇到了问题. 这里总结一下: 问题1.tp5+nginx=500 internal server error 我用的是phps ...

  9. AES加密中遇到的坑

    项目背景: 终端数据需要上传到后台,为了安全,使用了AES加密 问题1: 数据首先经过了protobuf进行格式,数据传输到后台无法解析 解决:二进制数据直接进行AES加密后大多无法正常解析,于是在加 ...

  10. 由AnnotatedElementUtils延伸的一些所思所想

    这篇博客的两个主题: spring的AnnotatedElementUtils 个人源码阅读方法论分享 为什么要分享AnnotatedElementUtils这个类呢,这个类看起来就是一个工具类,听起 ...