使用ajax后获取元素的方法以及事件委托的使用

我们前端开发经常用到ajax请求，使用最多的无疑是li的循环了，然后append到DOM树上，然后此时要操作li的某些交互时，是获取不到元素的，此时我们可以这样做：

$("body").on("touchend","选择器",function(){
            // 要折行的交互。
        });

下面说一下事件委托的使用，什么是事件委托我就不啰嗦了，小伙伴可以去百度一下：

这里的操作是：点击删除，弹出一个是否删除的弹窗，点击确定后删除当前一条的评论。

html代码：

<ul class="good-message-list" id="J-good-message-list">
            <li class="clearfix">
                <a class="left-user-icon">
                    <img src="images/user_img.png">
                </a>
                <ul class="right-message-box">
                    <li class="clearfix user-bar">
                        <a class="user-name">浅夏、下雨</a>
                        <i class="like-numb js-like-btn"><input type="text" UNSELECTABLE="on"/></i>
                    </li>
                    <li class="date-bar">昨天</li>
                    <li class="message-txt">整体视觉方向还OK，但是有些细节、逻辑、易操作性上还要有所改进。</li>
                    <li class="delete"><em>删除</em></li>
                </ul>

            </li>

<li class="clearfix">
                <a class="left-user-icon">
                    <img src="images/user_img.png">
                </a>
                <ul class="right-message-box">
                    <li class="clearfix user-bar">
                        <a class="user-name">浅夏、下雨</a>
                        <i class="like-numb js-like-btn"><input type="text" UNSELECTABLE="on"/></i>
                    </li>
                    <li class="date-bar">昨天</li>
                    <li class="message-txt">整体视觉方向还OK，但是有些细节、逻辑、易操作性上还要有所改进。</li>
                    <li class="delete"><em>删除</em></li>
                </ul>
            </li>
</ul>

js代码：

// 找到父元素，添加事件...
document.getElementById("J-good-message-list").addEventListener("click",function(e) {
// e.target是被点击的元素!
// 如果被点击的是li元素
if(e.target && e.target.nodeName == "LI") {
//不知道e.target是什么的小伙伴可以打印看看是什么console.log(e.target);
//然后就执行删除，我就不写那么详细了(删除的弹窗就不弹出来了)
e.target.parentNode().parentNode().remove();
}
});

jq代码：

$("body").on("touchend",".delete",function(){
            $("#mask").show();
            $("#mask_modal").show();
            var self = $(this);

            /*****点击确定*****/
            $(".mask-box-right").on("touchend",function(){
                $("#mask").hide();
                $("#mask_modal").hide();
                console.log(self);
                self.parent().parent().remove(); //这里的self就是外层的$(this)，可以在外层打印看看$(this)指的是谁这样就知道了
            });
        });