1.需求:点击添加游戏按钮实现添加游戏,点击删除按钮,删除游戏。

2.实现思路:分别给添加按钮和删除按钮添加click事件。

3.遇到的问题:自己添加的游戏不能进行删除。

4.原因分析:文档加载完毕后,并没有响应的结点,因此也就不会被绑定事件。

5.解决方法:使用on方法来改进click事件。

html代码:

  1. <div id='listbox'>
  2. <dl>
  3. <dt><img src="data:images/p1.jpg" /></dt>
  4. <dd>完美世界</dd>
  5. <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
  6. </dl>
  7. <dl>
  8. <dt><img src="data:images/p2.jpg" /></dt>
  9. <dd>真三国无双</dd>
  10. <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
  11. </dl>
  12. <dl>
  13. <dt><img src="data:images/p3.jpg" /></dt>
  14. <dd>王者荣耀</dd>
  15. <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
  16. </dl>
  17.  
  18. <div class='clear'></div>
  19. <input type="button" value='新增游戏' class='add'/>
  20. </div>

jQuery代码:

  1. $(function (){
  2. $("#listbox .add").click(function (){
  3. let game = "<dl><dt><img src='images/p4.jpg'></dt><dd>三国杀十周年</dd><dd><a class='del' href='javascript:void(0);'>删除</a></dd></dl>";
  4. $("#listbox dl:last").after(game);
  5. })
  6. //通过on将事件绑定到body,这样对于新添加的元素也同样适用。
  7. $("body").on('click','.del',function(){
  8. $(this).parents("dl").remove();
  9. });
  10. })

jQuery实现游戏推荐的更多相关文章

  1. 让网站动起来!12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  2. 非常华丽的jQuery/HTML5应用推荐

    jQuery确实是一个非常优秀的JavaScript框架,尤其是结合HTML5,更可以让网页变得生动有趣.今天向大家推荐一些非常华丽的jQuery/HTML5应用,废话不多说,直接看吧. 1.jQue ...

  3. 2018年度最优秀mac软件及游戏推荐,个个万里挑一

    今天和大家带来2018年度最优秀Mac软件和游戏合集,个个万里挑一,2018年,风云社区(scoee.com)分享了上数千款优秀的Mac软件和游戏,结合用户反馈,精选出各个类别的优秀的Mac软件,推荐 ...

  4. 锋利的jQuery书中推荐的几款插件

    1.jQuery表单验证插件——Validation 2.jQuery表单插件——Form 3.模态窗口插件——SimpleModal 4.管理Cookie的插件——Cookie 5.jQuery U ...

  5. Recommender Systems移动互联网个性化游戏推荐

    对于在线商店,主要关心两方面:1. 提升转化率(将不消费的用户转变为消费用户):2. 提升消费额(已经花钱的人,花更多的强). 对比了6种方法:1. 协同过滤:2. slope one:3. 基于内容 ...

  6. jQuery树结构插件推荐zTree

    JQuery zTree 下载地址http://plugins.jquery.com/zTree.v3/

  7. 有用的jQuery布局插件推荐

    网页设计中排版也是很重要的,但有些比较难的网页排版我们可以用一些jQuery来实现,今天文章中主要分享一些有用的jQuery布局插件,有类似Pinterest流布局插件.友荐的滑动提示块以及其它jQu ...

  8. jQuery tablesort插件推荐

    搜索结果的第一条网址(似乎是Official Site)似乎有问题(也可能是我弄错了  总之chrome中有个叉叉) 所以还是用这个吧http://mottie.github.io/tablesort ...

  9. 10 个强大的JavaScript / jQuery 模板引擎推荐

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...

随机推荐

  1. G - Can you answer these queries? & N - 花神游历各国

      A lot of battleships of evil are arranged in a line before the battle. Our commander decides to us ...

  2. ACdream1414 Geometry Problem

    Problem Description       Peter is studying in the third grade of elementary school. His teacher of ...

  3. Codeforces Round #633 div2 A~C

    A. Filling Diamonds 题意:给你n个菱形方块,问能构成图示形状的有多少种 题解:自己画几个不难发现答案是n 代码: 1 #include <iostream> 2 #in ...

  4. WPF 中的逻辑树(Logical Tree)与可视化元素树(Visual Tree)

    一.前言 ​ WPF 中有两种"树":逻辑树(Logical Tree)和可视化元素树(Visual Tree). Logical Tree 最显著的特点就是它完全由布局组件和控件 ...

  5. 过滤器,拦截器,aop区别与使用场景

    1. 什么是过滤器 过滤器,顾名思义就是起到过滤筛选作用的一种事物,只不过相较于现实生活中的过滤器,这里的过滤器过滤的对象是客户端访问的web资源,也可以理解为一种预处理手段,对资源进行拦截后,将其中 ...

  6. Kafka SASL/SCRAM+ACL实现动态创建用户及权限控制

    kafka系列文章 第一章 linux单机安装kafka 第二章 kafka--集群安裝部署(自带zookeeper) 第三章 Kafka SASL/SCRAM+ACL实现动态创建用户及权限控制 Ka ...

  7. C#中word导出功能骚操作

    马上过牛年了,先祝大家新年好,身体好,心情好!!! 年前最后写一篇之前项目开发的一个功能,自己根据系统业务,想到的一个解决办法,效率还是不错的,废话不多说,开整!!! 需求:企业填报自己的企业信息到系 ...

  8. HEXO添加置顶功能

    使用库:参考 http://wangwlj.com/2018/01/09/blog_pin_post/ 目前已经有修改后支持置顶的仓库,可以直接用以下命令安装.(cmd 到博客根目录,nmp运行) $ ...

  9. 6. Connection has already been closed 数据库连接被关闭

    生产上Tomcat出现 Connection has already been closed.问题,但是在uat测试是好的! 遇见两次: 1.某个程序dao中执行逻辑异常复杂,有时候需要执行一分多钟, ...

  10. Hacker101 CTF-Micro-CMS v2

    一.打开网站是这个样子 找到一个登录框,存在注入漏洞 3.我们可以这样更改用户名中的输入: admin' or 1=1 -- 4.错误消息显示Invalid Password,因此我们也应该尝试构造一 ...