使用$('#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. 福州大学2020年春软工实践W班第一次作业

    作业描述 这个作业属于哪个课程 福州大学2020年春软工实践W班 这个作业要求在哪里 寒假作业(1/2) 这个作业的目标 建立博客.回顾,我的初心.当下和未来.学习路线 作业正文 福州大学2020年春 ...

  2. Spring Cloud Alibaba 教程 | 前世今生

    Spring Cloud Alibaba是什么 先来看一下官方是怎么定义Spring Cloud Alibaba的: Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此 ...

  3. SQL基础教程(第2版)第6章 函数、谓词、CASE表达式:练习题

    END) AS low_price, END) AS mid_price, END) AS high_price FROM Product; 6_2.sql

  4. Windows下C extension not loaded for Word2Vec, training will be slow.解决方法

    在网上看了好多个博客,都没有很好解决,最后google.. 大概问题就是gensim库在安装时没有和其他一些包关联起来(可能是由于用pip安装的gensim导致这个问题),所以在用Word2Vec时没 ...

  5. 27. docker compose 单机 均衡负载

    1.编写Dockerfile #Dockerfile FROM python:2.7 LABEL maintaner="eaon eaon123@docker.com" COPY ...

  6. PyCharm 代码行出现多余的数字

    添加或取消 Ctrl + Shift + 对应的数字(1-9) 作用 相当于标签,Ctrl + 对应的数字键,可以快速定位到做了标签的代码行

  7. shell 命令综合实战

    此篇为运维人员(开发)经常使用的查看系统状态的相关命令,主要综合了awk,grep ,sed等文本处理命令,能够大大提高工作效率,在此做个简单分享,也便于自己以后查找,毕竟好记性不如烂笔头. 获取et ...

  8. [Algo] 117. Array Deduplication III

    Given a sorted integer array, remove duplicate elements. For each group of elements with the same va ...

  9. 【PXC】关于限流的参数,状态值说明

    一.什么是流控(FC)?如何工作? 节点接收写集并把它们按照全局顺序组织起来,节点将接收到的未应用和提交的事务保存在接收队列中,当这个接收队列达到一定的大小,将触发限流:此时节点将暂停复制,节点会先处 ...

  10. 第3章 ZooKeeper基本数据模型

    第3章 ZooKeeper基本数据模型 3-1 zk数据模型介绍 3-2 zk客户端连接关闭服务端,查看znode ./zkCli.sh Ctrl + C 退出 =================== ...