js动态添加元素绑定事件问题

//开始是直接普通写的绑定click事件  其中li a i 中的i是动态添加的 结果是触发不了。。
$("li a i").click(function () {
        $(this).mybootstraptab("close");
        //var contentid = $(this).parent().attr("href").substr(1);
        //var prevDom = $(this).parent().parent().prev().children("a").eq(0);//先获取将关闭的tab的前一个元素 用以关闭tab后 显示
        //$(this).parent().parent().remove();//删除标签
        //$(".tab-content [id='" + contentid + "'").remove();//删除内容
        //prevDom.tab('show');//前一个标签显示
    });

//应该这么绑定 才可以 触发
$("body").on("click", "li a i", function () {
        $(this).mybootstraptab("close");
        //var contentid = $(this).parent().attr("href").substr(1);
        //var prevDom = $(this).parent().parent().prev().children("a").eq(0);//先获取将关闭的tab的前一个元素 用以关闭tab后 显示
        //$(this).parent().parent().remove();//删除标签
        //$(".tab-content [id='" + contentid + "'").remove();//删除内容
        //prevDom.tab('show');//前一个标签显示
    });