有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果。

例如:

  1. <section>
  2. 测试动态生成的DOM点击事件
  3. <br />
  4. </section>
  5. <script src="jquery-1.11.2.min.js"></script>
  6. <script>
  7. $(function () {
  8. $.ajax({
  9. type: "post",
  10. url: "Handler1.ashx",
  11. data: {},
  12. success: function (data) {
  13. $("section").append(data); //把获取的标签动态添加到页面中
  14. }
  15. })
  16. });
  17. $("#test").click(function () {
  18. alert("Smile");
  19. })
  20. </script>

生成页面,点击A标签无效果。

这里只介绍两种解决方法。

①把事件写在生成的字符串当中,感觉很low

里面什么方法名外面就声明一个(需要带参就传参)。

②我一般喜欢在JS里面直接写点击事件,不喜欢在标签里面写事件

我们直接写这个标签的点击事件是没效果的,我们就换个写法,利用On来完成。

这样也可以完成点击事件。

另附:a标签的href也是可以执行脚本的,点击事件也会执行脚本,点击事件优先,然后在执行href链接。

下载一般都是把A标签的Href给个一般处理程序的链接(参数就用?传值)。但我这个下载的参数是动态生成的,在后台生成字符串的时候没有参数。需要在前台根据用户选择的来进行传递参数。所以需要我们动态生成Href的链接

  1. //下载
  2. $("#uploadInfo").click(function () {
  3. var uids = "";
  4. $(":checkbox[name='A']:checked").each(function (i, item) {
  5. uids += $(item).attr("data-id") + ",";
  6. })
  7. if (uids === "") {
  8. NewAlertBox("warning","请最少选择一项",);
  9. } else {
  10. var urls = "GroupTeamUserListDocUpload.ashx?CaseID=" + CaseID + "&UID=" + uids;
  11. $(this).attr("href", urls); //执行完了点击事件,把Href赋值,然后自动跳转href链接
  12. }
  13.  
  14. });

动态生成的DOM做点击事件无效的更多相关文章

  1. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  2. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  3. 动态生成的dom元素如何绑定事件

    两种类型1.$('li').bind('click',function(){}); 当你用js动态添加li的时候,你添加的li不具有你绑定的事件.这种写法与$('li').click(function ...

  4. 动态生成的DOM不会触发onclick事件的原因及解决方法

    最近朋友在做一个项目的时候,遇到动态加载微博内容,然后点击“展开评论”后获取该微博的所有评论.这里使用了动态加载的<span mid='123456789′ class='get_comment ...

  5. IOS - Safari中click点击事件无效

    做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...

  6. ListView的item中有button和checkbox,listview的点击事件无效

    ListView的item中有button和checkbox,listview的点击事件无效,解决办法: 在item布局文件中的根控件中添加属性设置: android:descendantFocusa ...

  7. electron 点击事件无效

    用CSS的 -webkit-app-region: drag;设置窗口可以移动后,点击事件无效 解决办法暂时不知道, 给点击的按钮加 -webkit-app-region: no-drag; 就可以点 ...

  8. Android 7.0 TextView点击事件无效修复方案

    public class PostTextView extends TextView { private Handler handler = new Handler(Looper.getMainLoo ...

  9. jQuery绑定动态元素的点击事件无效

    之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明. 示例如下: ...

随机推荐

  1. Big Data Opportunities and Challenges(by周志华)论文要点

    大数据环境下的机器学习 三种误解:模型不再重要(大量数据上复杂模型依然提升显著,大数据是的复杂模型充分利用数据且难以过拟合),相关性就足够了(因果关系重要性无法被替代),以前的研究方向不再重要(高性能 ...

  2. jemeter、windox下安装教程

    JMeter是Apache软件基金会的产品,用于对静态和动态的资源(文件,Servlet,Perl脚本,Java对象,数据库和查询,FTP服务器等等)的性能进行测试,是一款很方便的测试软件. 系统:w ...

  3. Hadoop2.X分布式集群部署

    本博文集群搭建没有实现Hadoop HA,详细文档在后续给出,本次只是先给出大概逻辑思路. (一)hadoop2.x版本下载及安装 Hadoop 版本选择目前主要基于三个厂商(国外)如下所示: 基于A ...

  4. python 中文分词:结巴分词

    中文分词是中文文本处理的一个基础性工作,结巴分词利用进行中文分词.其基本实现原理有三点: 基于Trie树结构实现高效的词图扫描,生成句子中汉字所有可能成词情况所构成的有向无环图(DAG) 采用了动态规 ...

  5. BNU 27847——Cellphone Typing——————【字典树】

    Cellphone Typing Time Limit: 5000ms Memory Limit: 131072KB This problem will be judged on UVA. Origi ...

  6. Lua 遍历Linux目录下的文件夹

    代码如下,里面有注释,应该能看懂. function getFile(file_name) local f = assert(io.open(file_name, 'r')) local string ...

  7. c#-day02学习笔记

    类型转化 为什么要类型转化:因为C#语言是强类型的语言,所以区分了很多的类型,类型和类型之间是不能直接赋值的,如果要赋值 就需要转换类型 类型转换分为两大类: 第一类:隐式转换 隐式转换是系统默认的转 ...

  8. PS基础,数学,语文

    PS基础(修图) 污点修复画笔工具---设置画笔大小---设置类型(内容识别)---修改图片---完成. 修复画笔工具---设置画笔大小---设置源(取样)---修改图片---完成. 修补工具---设 ...

  9. 管理员账户权限不足 解决方案 类似没有XXX权限之类的问题解决方法

  10. Python函数(2)

    一.函数对象 函数是第一类对象:指的是函数名指向的值可以被当作数据去使用. 1.函数可以被引用 例如: 2.可以当作参数传递给另一个函数 例如: 3.可以当作一个函数的返回值 例如: 4.可以当作容器 ...