jQuery实现游戏推荐
1.需求:点击添加游戏按钮实现添加游戏,点击删除按钮,删除游戏。
2.实现思路:分别给添加按钮和删除按钮添加click事件。
3.遇到的问题:自己添加的游戏不能进行删除。
4.原因分析:文档加载完毕后,并没有响应的结点,因此也就不会被绑定事件。
5.解决方法:使用on方法来改进click事件。
html代码:
- <div id='listbox'>
- <dl>
- <dt><img src="data:images/p1.jpg" /></dt>
- <dd>完美世界</dd>
- <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
- </dl>
- <dl>
- <dt><img src="data:images/p2.jpg" /></dt>
- <dd>真三国无双</dd>
- <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
- </dl>
- <dl>
- <dt><img src="data:images/p3.jpg" /></dt>
- <dd>王者荣耀</dd>
- <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
- </dl>
- <div class='clear'></div>
- <input type="button" value='新增游戏' class='add'/>
- </div>
jQuery代码:
- $(function (){
- $("#listbox .add").click(function (){
- let game = "<dl><dt><img src='images/p4.jpg'></dt><dd>三国杀十周年</dd><dd><a class='del' href='javascript:void(0);'>删除</a></dd></dl>";
- $("#listbox dl:last").after(game);
- })
- //通过on将事件绑定到body,这样对于新添加的元素也同样适用。
- $("body").on('click','.del',function(){
- $(this).parents("dl").remove();
- });
- })
jQuery实现游戏推荐的更多相关文章
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- 非常华丽的jQuery/HTML5应用推荐
jQuery确实是一个非常优秀的JavaScript框架,尤其是结合HTML5,更可以让网页变得生动有趣.今天向大家推荐一些非常华丽的jQuery/HTML5应用,废话不多说,直接看吧. 1.jQue ...
- 2018年度最优秀mac软件及游戏推荐,个个万里挑一
今天和大家带来2018年度最优秀Mac软件和游戏合集,个个万里挑一,2018年,风云社区(scoee.com)分享了上数千款优秀的Mac软件和游戏,结合用户反馈,精选出各个类别的优秀的Mac软件,推荐 ...
- 锋利的jQuery书中推荐的几款插件
1.jQuery表单验证插件——Validation 2.jQuery表单插件——Form 3.模态窗口插件——SimpleModal 4.管理Cookie的插件——Cookie 5.jQuery U ...
- Recommender Systems移动互联网个性化游戏推荐
对于在线商店,主要关心两方面:1. 提升转化率(将不消费的用户转变为消费用户):2. 提升消费额(已经花钱的人,花更多的强). 对比了6种方法:1. 协同过滤:2. slope one:3. 基于内容 ...
- jQuery树结构插件推荐zTree
JQuery zTree 下载地址http://plugins.jquery.com/zTree.v3/
- 有用的jQuery布局插件推荐
网页设计中排版也是很重要的,但有些比较难的网页排版我们可以用一些jQuery来实现,今天文章中主要分享一些有用的jQuery布局插件,有类似Pinterest流布局插件.友荐的滑动提示块以及其它jQu ...
- jQuery tablesort插件推荐
搜索结果的第一条网址(似乎是Official Site)似乎有问题(也可能是我弄错了 总之chrome中有个叉叉) 所以还是用这个吧http://mottie.github.io/tablesort ...
- 10 个强大的JavaScript / jQuery 模板引擎推荐
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...
随机推荐
- 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 ...
- ACdream1414 Geometry Problem
Problem Description Peter is studying in the third grade of elementary school. His teacher of ...
- Codeforces Round #633 div2 A~C
A. Filling Diamonds 题意:给你n个菱形方块,问能构成图示形状的有多少种 题解:自己画几个不难发现答案是n 代码: 1 #include <iostream> 2 #in ...
- WPF 中的逻辑树(Logical Tree)与可视化元素树(Visual Tree)
一.前言 WPF 中有两种"树":逻辑树(Logical Tree)和可视化元素树(Visual Tree). Logical Tree 最显著的特点就是它完全由布局组件和控件 ...
- 过滤器,拦截器,aop区别与使用场景
1. 什么是过滤器 过滤器,顾名思义就是起到过滤筛选作用的一种事物,只不过相较于现实生活中的过滤器,这里的过滤器过滤的对象是客户端访问的web资源,也可以理解为一种预处理手段,对资源进行拦截后,将其中 ...
- Kafka SASL/SCRAM+ACL实现动态创建用户及权限控制
kafka系列文章 第一章 linux单机安装kafka 第二章 kafka--集群安裝部署(自带zookeeper) 第三章 Kafka SASL/SCRAM+ACL实现动态创建用户及权限控制 Ka ...
- C#中word导出功能骚操作
马上过牛年了,先祝大家新年好,身体好,心情好!!! 年前最后写一篇之前项目开发的一个功能,自己根据系统业务,想到的一个解决办法,效率还是不错的,废话不多说,开整!!! 需求:企业填报自己的企业信息到系 ...
- HEXO添加置顶功能
使用库:参考 http://wangwlj.com/2018/01/09/blog_pin_post/ 目前已经有修改后支持置顶的仓库,可以直接用以下命令安装.(cmd 到博客根目录,nmp运行) $ ...
- 6. Connection has already been closed 数据库连接被关闭
生产上Tomcat出现 Connection has already been closed.问题,但是在uat测试是好的! 遇见两次: 1.某个程序dao中执行逻辑异常复杂,有时候需要执行一分多钟, ...
- Hacker101 CTF-Micro-CMS v2
一.打开网站是这个样子 找到一个登录框,存在注入漏洞 3.我们可以这样更改用户名中的输入: admin' or 1=1 -- 4.错误消息显示Invalid Password,因此我们也应该尝试构造一 ...