js动态替换数据的点击事件

做项目时遇到的，具体是界面如下图：当点击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事件。