做项目时遇到的,具体是界面如下图:当点击X号时,出现删除、取消按钮,当点击删除时,这一行删除,当点击取消时又恢复到初始状态。

需要关注的问题是,js动态添加的删除、取消按钮的点击事件。当点击取消时恢复到初始状态的X号的再点击事件。

html代码如下:

 <div id="mydiv" class="slide-menu">
<ul class="slide-list">
<li><a href="javascript:void(0)" class="menuSlide selected"><span></span>群组一<i> &times;</i></a></li>
<li><a href="javascript:void(0)" class="menuSlide"><span></span>群组二<i> &times;</i></a></li>
<li><a href="javascript:void(0)" class="menuSlide "><span></span>群组三<i> &times;</i></a></li>
<li><a href="javascript:void(0)" class="menuSlide addgroup"><span></span>+</a></li>
</ul>
</div>

js代码如下:

  //群组管理弹框左侧的删除群组的操作
$("#mydiv").on('click',"i",function(){
var par=$(this).parent();
$(this).parent().parent().animate({marginLeft:"-30px"},300);
$("<div class='right'><em>删除</em><em>取消</em></div>").replaceAll($(this));
par.find("em").on('click',function(){
if($(this).html()=='删除'){
$(this).parent().parent().parent().remove();
}
else{
$(this).parent().replaceWith("<i> &times;</i>");
par.parent().animate({marginLeft:"0px"},300);
}
})
});

当初写的时候问题是卡在点击取消时恢复到初始状态的X号后再点击没反应。当时的写法是$("#mydiv").find("i").on('click',function(){})。这样再点击X号时它不会给i附加click事件的,所以正确的写法应该是将i放在on的括号内写,这样就能找到i然后添加click事件。

js动态替换数据的点击事件的更多相关文章

  1. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  2. 抓取Js动态生成数据且以滚动页面方式分页的网页

    代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...

  3. js动态生成数据列表

    我们通常会使用table标签来展示数据内容,由于需要展示的数据内容是随时更换的,所以不可能将展示的数据列表写死在html写死在页面中,而是需要我们根据后台传来的数据随时更换,这个时候就需要我们使用js ...

  4. (转载)js(jquery)的on绑定点击事件执行两次的解决办法

    js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...

  5. JS实现按下按键触发点击事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. js中 ajax动态新增节点无法触发点击事件

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最 ...

  7. JS动态添加的标签无法绑定事件解决方案~~~

    今天用ajax实现动态插入数据时发现监听一直不起作用,一样的代码,非动态的就可以监听实现 这是困扰了我近一个小时的bug,后面才理解到可能是动态插入导致的! 看了看网上的解决方案,似乎都不太通俗,讲的 ...

  8. 【原生js】js动态添加dom,如何绑定事件

    首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...

  9. js动态追加的元素如何触发事件

    一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...

随机推荐

  1. 使用JDOM操作XML

    JDOM介绍 JDOM是使用Java语言编写的,用于读写及操作XML的一套组件,Jdom同时具有DOM修改文件的优点和SAX读取快速的优点. JDOM的使用 首先下载JDOM的JAR包,本文使用的是j ...

  2. 利用JavaScript来实现用动态检验密码强度

    平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度.如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好.所以 ...

  3. 20161014001 DataGridView 单元格内容 自动计算

    private void T_Form_CY_CBD_D_CellValueChanged(object sender, DataGridViewCellEventArgs e)        {   ...

  4. DllImport attribute的总结

    C#有没有方法可以直接都用已经存在的功能(比如Windows中的一些功能,C++中已经编写好的一些方法),而不需要重新编写代码? 答案是肯定,就是通过接下来要说的 DllImport . DllImp ...

  5. Java读取Level-1行情dbf文件极致优化(2)

    最近架构一个项目,实现行情的接入和分发,需要达到极致的低时延特性,这对于证券系统是非常重要的.接入的行情源是可以配置,既可以是Level-1,也可以是Level-2或其他第三方的源.虽然Level-1 ...

  6. 【Python】Python3中的str和bytes

    参考文章:Python 3的bytes/str之别 len()函数计算的是str的字符数,如果换成bytes,len()函数就计算字节数 >>> len('ABC') 3 >& ...

  7. C++ 中注意,零扩展和符号位扩展

    版权声明:本文为博主原创文章,未经博主允许不得转载. 首先,介绍一下两种扩展的定义 转 http://blog.csdn.net/jaylong35/article/details/6160736 符 ...

  8. (IEEE-754) 字节数组与浮点数之间的互相转换(MODBUS float类型)

    在做上位机开发过程中,经常会碰到字节数组与浮点数,整数等数据之间的转换,有时为了验证数据是否解析正确,得借助于IEEE浮点数工具,本文把基于c#实现的浮点数与字节数组(或16进制的字符串)转换的实现方 ...

  9. Cheatsheet: 2016 03.01 ~ 03.31

    JAVA Quick Java 8 or Java 7 Dev Environments With Docker Printing arrays by hacking the JVM Mobile H ...

  10. srand()以及rand()函数用法

    srand()就是给rand()提供种子seed 如果srand每次输入的数值是一样的,那么每次运行产生的随机数也是一样的, srand(n) for(10) rand()也就是说,以一个固定的数值作 ...