移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件
背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件;
点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档。
使用过的方法:
1、通知 jquery 的 $(selector).on('click',function(){}) 在动态添加元素的后一步执行,此段代码是在 ajax 内部,如下:
$(".task-doc-list").append(tempStr);
$("body").on("click", ".task-doc-list .task-doc-operation", setClickEvent);
.task-doc-list 是静态存在的元素;动态添加事件的元素是 “.task-doc-operation"
使用这种方法,可以添加事件,也能正常执行,但存在2个问题:
1、初次打开页面时为正常,若是通过上面的菜单选项,选择不同的文档类型后,此时,事件便不能添加成功了,问题暂不明白。
2、所加载的文档是有分页,在多页的情况下时,当加载下一页后,事件会被再次添加,导致事件会根据加载分页次数添加多次事件。
故不能使用此方法。
2、在 ajax 外部,通过下述方法不仅解决方法1的问题,且能正常添加事件,事件也仅添加、执行一次。
$(".task-doc-list").on("tap", ".task-doc-operation", function(){
mui.alert("待开发...", "提示");
});
此方法重点是将 事件名 'click' 更换为 'tap' ,如果此法放在 ajax 内部,依然会存在问题。此法为何成功,原因暂不明。
移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件的更多相关文章
- dtree实现动态加载树形菜单,动态插入树形菜单
1.导入 dtree文件 dtree.css img文件夹 dtree.js 2. 建立对应 的数据库 1 父ID name id 3 建立连接 ...
- Ext JS 如何动态加载JavaScript创建窗体
JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...
- Echarts使用及动态加载图表数据 折线图X轴数据动态加载
Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...
- [AngularJS] 使用AngularCSS动态加载CSS
[AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...
- C#动态加载树菜单
在做权限系统的时候,需要有一个树形的菜单.下图就是一个树形菜单的样式 但问题是,我们可以实现写死的树形菜单.什么是写死的?就是在前台代码中写好要加载的树形菜单是什么样子的.但是我们权限系统的要求是动态 ...
- Android 实现布局动态加载
Android 动态加载布局 通过使用LayoutInflater 每次点击按钮时候去读取布局文件,然后找到布局文件里面的各个VIEW 操作完VIEW 后加载进我们setContentView 方面里 ...
- 【Unity3D】Unity3D之 Resources.Load 动态加载资源
[Unity3D]Unity3D之 Resources.Load 动态加载资源 1.Resources.Load:使用这种方式加载资源,首先需要下Asset目录下创建一个名为Resources的文件夹 ...
- 某APK中使用了动态注册BroadcastReceiver,Launcher中动态加载此APK出现java.lang.SecurityException异常的解决方法
在某APK中,通过如下方法动态注册了一个BroadcastReceiver,代码参考如下: @Override protected void onAttachedToWindow() { super. ...
- Java的动态加载及其安全性问题
1.什么是动态加载 Class Loaders是动态加载Java类与Resource的一种机制.它支持Laziness,type-safe linkage,user-defined extensibi ...
随机推荐
- Winform中使用Reactivex代替BeginInvoke/Invoke来更新UI数据
首先通过Nuget安装包System.Reactive. ReactiveX项目 Url: https://github.com/Reactive-Extensions/Rx.NET public p ...
- 数据库 concat 与 ||
mysql中用concat,oracle中concat和||都有,都是做字符串拼接的 oracle简单实例: 1.建表 CREATE TABLE tab1 (col1 VARCHAR2(6), col ...
- D. Game with modulo 交互题(取余(膜)性质)附带a mod b<a/2证明
D. Game with modulo 交互题(取余(膜)性质) 题意 猜一个点\(a\)可以向机器提问 点对\((x,y)\) 如果\(x\mod(a)>=y\mod(a)\)回答\(x\) ...
- try catch 语句中有return 的各类情况
在牛客上做java题时遇到过多到关于try catch语句的问题,看了很多答案解析,在这里记录一下. 首先给出一道题目: 下面代码的运行结果为? A.catch语句块 和是43 B.编译异常 C.fi ...
- ios 下 select和option 无法隐藏指定元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- es6模块化设计
//导出 //方式一 export const name = 'hello' export let addr = 'chengdu' export var list = [1,2,3] //方式二 c ...
- shell脚本编程学习笔记(二)linux服务器启动流程
一.linux服务器启动流程 1.bios找到磁盘上的mbr主引导扇区 2.进入grub洁面选择相应的启动内核 3.读取kernel内核文件-/boot/vmlinuz-* 4.读取init的镜像文件 ...
- Git - 06. git checkout
1. 概述 已经学会查看 提交记录 尝试在 提交记录 之间做跳转 2. 命令 跳转到提交 概述 跳转到 日志 里的某次提交 命令 # 撤销 工作区的所有改动, 返回 当前分支 的 上一个提交 > ...
- Go_type
1. type的定义和使用 Go语言支持函数式编程,可以使用高阶编程语法.一个函数可以作为另一个函数的参数,也可以作为另一个函数的返回值,那么在定义这个高阶函数的时候,如果函数的类型比较复杂,我们可以 ...
- 学会C#可以做什么
C#基于.NET Framework 和 .NET CORE平台 Client/Server 客户端/服务端 windows桌面应用程序 winform 2D WPF 3D Browser/Se ...