jQuery实现游戏推荐

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

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

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

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

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

html代码：

<div id='listbox'>
     <dl>
        <dt><img src="images/p1.jpg" /></dt>
        <dd>完美世界</dd>
        <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
    </dl>
    <dl>
        <dt><img src="images/p2.jpg" /></dt>
        <dd>真三国无双</dd>
        <dd><a class='del' href='javascript:void(0);'>删除</a></dd>
    </dl>
    <dl>
        <dt><img src="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();
            });
        })