关于on绑定click事件的一个困惑，jquery版本v1.10.2

最近在做个后台的列表管理，在表格中append行后，on绑定的click事件无效，求解惑选中，然后删除一条数据
删除代码如下
$("#confrimModal button:contains('确定')").on("click",function(){
/*ajax跳转到后台   删除文章 传递参数为数组arr1,arr1中为要删除数据的主键*/
var jsonString = JSON.stringify(arr1); //将数组转化为json格式的字符串
var p = $(".pagin-list").find("span.current").text(); $.ajax({
async:false,
type:"post",
url:"__CONTROLLER__/delArticle", 
        data:{jsonString:jsonString},
success:function(data){
var data_return = eval(data); //获取到ajax成功返回的一维数组
if(data_return['delete_flag']){  //删除成功   delete_flag:true
$("#confrimModal").modal("hide");
$("#mytbody tr").remove();
}else{   //删除失败
alert("删除失败");
}

},
error:function(){
}
}); $.ajax({
async:false,
type:"get",
url:"__CONTROLLER__/redisplayList",
data:{p:p},
success:function(data){
var data_return = eval(data); //获取到ajax成功返回的一维数组
var reg = /redisplaylist/g;
var htmlshow = data_return['show'].replace(reg,"showarticlelist");
$(".pagin-list").html(htmlshow);
$(".pxofy").html("显示第 " + data_return['firstRow'] + " 条到 " + data_return['lastRow'] + " 条记录，总共" + data_return['count'] + "条记录");
var htmllist = "";
for(var p in data_return['listSource']){
htmllist += '<tr><td style="width:5%" class="text-center"><i class="iconfont icon-weigouxuan"></i></td><td>' + data_return['listSource'][p].title + '</td><td>' + data_return['listSource'][p].create_date + '</td><td>' + data_return['listSource'][p].author + '</td><td>' + data_return['listSource'][p].tag + '</td><td><button class="btn btn-primary btn-xs btn-marginleft"><i class="iconfont icon-edit">编辑</i></button><button class="btn btn-primary btn-xs btn-marginleft"><i class="iconfont icon-delete">删除</i></button><button class="hidden">' + data_return['listSource'][p].article_id + '</button></td></tr>';
}
$("#mytbody").append(htmllist);
},
error:function(){}
}); });
删除一行后，remove掉所有行，然后再append进去
下面是行前面的方框的选中效果的click事件
/*为表格第一列的td中的i元素绑定点击事件*/
$("#articleList tr td:first-child").on("click","i",function(){
if(!($(this).hasClass("icon-yigouxuan"))){
$(this).removeClass("icon-weigouxuan").addClass("icon-yigouxuan i_red"); /*判断其他的td中的i的状态，如果其他都勾选了 则th中的i也勾选*/
var flag = true;   //  声明一个标识变量
//$(this).parent().siblings()为何是找到了同一行的其他td集合的jquery对象  长度为5。而不是该列的其他td
var $others_td_i = $(this).parents("tr").siblings().children("td:first-child").children("i");
$others_td_i.each(function(){
if($(this).hasClass("icon-weigouxuan")){
flag = false;    
return false;     //break的功能  ，终止循环
}else{
return true;     // continue的功能,终止本次循环，进入下一次循环
}
});
if(flag){
$first_th_i.removeClass("icon-weigouxuan").addClass("icon-yigouxuan i_red");
}
}else{
$(this).removeClass("icon-yigouxuan i_red").addClass("icon-weigouxuan"); if($first_th_i.hasClass("icon-yigouxuan")){
$first_th_i.removeClass("icon-yigouxuan i_red").addClass("icon-weigouxuan");
}
} });测试发现 append进去的行  没有该click效果，我是用on绑定父元素实现的click事件绑定，为何不起作用了啊 ，困惑