背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件;

点击选择下图中不同的文档类型,再通过 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 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件的更多相关文章

  1. dtree实现动态加载树形菜单,动态插入树形菜单

    1.导入  dtree文件    dtree.css   img文件夹   dtree.js 2. 建立对应 的数据库      1      父ID     name    id 3    建立连接 ...

  2. Ext JS 如何动态加载JavaScript创建窗体

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS ...

  3. Echarts使用及动态加载图表数据 折线图X轴数据动态加载

    Echarts简介 echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯JavaScript的图表库,来自百度...我想应该够简洁了 使用Echarts 目前,就官网的文 ...

  4. [AngularJS] 使用AngularCSS动态加载CSS

    [AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...

  5. C#动态加载树菜单

    在做权限系统的时候,需要有一个树形的菜单.下图就是一个树形菜单的样式 但问题是,我们可以实现写死的树形菜单.什么是写死的?就是在前台代码中写好要加载的树形菜单是什么样子的.但是我们权限系统的要求是动态 ...

  6. Android 实现布局动态加载

    Android 动态加载布局 通过使用LayoutInflater 每次点击按钮时候去读取布局文件,然后找到布局文件里面的各个VIEW 操作完VIEW 后加载进我们setContentView 方面里 ...

  7. 【Unity3D】Unity3D之 Resources.Load 动态加载资源

    [Unity3D]Unity3D之 Resources.Load 动态加载资源 1.Resources.Load:使用这种方式加载资源,首先需要下Asset目录下创建一个名为Resources的文件夹 ...

  8. 某APK中使用了动态注册BroadcastReceiver,Launcher中动态加载此APK出现java.lang.SecurityException异常的解决方法

    在某APK中,通过如下方法动态注册了一个BroadcastReceiver,代码参考如下: @Override protected void onAttachedToWindow() { super. ...

  9. Java的动态加载及其安全性问题

    1.什么是动态加载 Class Loaders是动态加载Java类与Resource的一种机制.它支持Laziness,type-safe linkage,user-defined extensibi ...

随机推荐

  1. javascript当中Function用法

    4)Function用法 例 3.4.1 <head>    <meta http-equiv="content-type" content="text ...

  2. SpringMVC框架应用

    SSMSpringMVC框架 1.    MVC设计模式:模型.视图.控制器: 视图:负责格式化数据并把他们呈现给用户,包括数据展示.用户交互.数据验证.界面设计等功能.对应组件:JSP或者HTML ...

  3. Scale9Sprite 的 setCapInsets中需要注意的地方

    在设置 setCapInsets()方法的y参数的时候,不直接取cocosStudio中的y,而是取Scale9Sprite.height - cocosStudio中的y.

  4. 状态压缩DP入门题

    . /*本题为状态压缩题 题目大意 : 一个矩阵里有很多格子,每个格子有两种状态,可以放牧和不可以放牧, 可以放牧用1表示,否则用0表示,在这块牧场放牛,要求两个相邻的方 格不能同时放牛(不包括斜着的 ...

  5. 题解【CJOJ1071/UVA】硬币问题

    P1071 - [Uva]硬币问题 Description 有n种硬币,面值分别为v1, v2, ..., vn,每种都有无限多.给定非负整数S,可以选用多少个硬币,使得面值之和恰好为S?输出硬币数目 ...

  6. 2.17NOIP模拟赛(by hzwer) T3 小奇回地球

    [题目背景] 开学了,小奇在回地球的路上,遇到了一个棘手的问题. [问题描述] 简单来说,它要从标号为 1 的星球到标号为 n 的星球,某一些星球之间有航线. 由于超时空隧道的存在,从一个星球到另一个 ...

  7. JavaScript中的 typeof,null,和undefined

    typeof操作符 null 在JavaScript中null表示“什么都没有”. null是一个只有一个值的特殊类型.表示一个空对象引用. typeof null; 返回的是object 可以将nu ...

  8. centos6.5下安装mysql数据库

    centos6.5下安装mysql数据库 1.安装mysql数据库:yum install mysql-server 2.临时启动数据库:service mysqld start 3.开机启动数据库: ...

  9. linux下实现keepalived+nginx高可用

    1 nginx负载均衡高可用 1.1 什么是负载均衡高可用 nginx作为负载均衡器,所有请求都到了nginx,可见nginx处于非常重点的位置,如果nginx服务器宕机后端web服务将无法提供服务, ...

  10. Django流程-以登录功能为例

    Django流程-以登录功能为例 一.注意点 1.新创建的app一定要先去settings.py注册 简写:'app01' 完整:'app01.apps.App01Config' 2.启动Django ...