用ajax返回数据，绑定点击事件，生成弹窗,可是分页后，下一页就没有点击生成弹窗效果了

Question

用ajax返回json数据，生成a标签，每个标签绑定点击事件，生成弹窗

                     for(var i=1;i<data.length;i++){
                             html += '<tr>';
                             html += '<td>'+ data[i].name +'</td>';
                             html += '<td>'+ '<img src="'+data[i].headimgurl+'"/>'+'</td>';
                             //javascript:return false;
                             html += '<td>'+ '<a onclick="javascript:return false;" '+' href="/plan/'+data[i].id+'">' +data[i].title+'</a>'+'</td>';
                             html += '<td>'+ getLocalTime(data[i].ctime) +'</td>';
                             html += '</tr>';  
                        }

点击每个a标签就会出现弹窗，弹窗里绑定的是console.log($(this))也没有任何数据产生

           $('td a').each(function(i){
                    $(this).on('click',function(){
                     window.open(this.href,"","width=500,height=500,top=200,left=500");
                })
            });

这是什么原因，怎么解决呢

Answer 1

动态绑定。

$('tb').on('click', 'a', function () {
    console.log(11)
})

Answer 2

下一页数据是怎么生成的？生成下一页的时候，事件有没有重新绑定呢?

$('td a').each(function(i){
        $(this).on('click',function(){
         window.open(this.href,"","width=500,height=500,top=200,left=500");
    })
});

以上代码只会对当前页面上存在的td a元素执行事件绑定

要想翻页后事件绑定依然有效而不重新绑定，请使用事件代理机制来实现,只要翻页时table元素不发生变化

$('table').on('click',"td a",function(){
     window.open(this.href,"","width=500,height=500,top=200,left=500");
});

Answer 3

test

是因为refurn false吧。
相当于把点击事件禁止了，无法触及到a标签的跳转

你把 onclick="javascript:return false"事件去除掉试一下.

你a标签已经有内联的Onclick了，这个优先级比较大，不会触及到你后面绑定的click事件的

Answer 4

动态生成的元素上，你还没生成插入好，就去绑定事件，是绑定不了的

请用事件委托

$('table').on('click','a',function(){
    //DO sth.
});

Answer 5

页面加载完成的时候会绑定一次，用ajax拼接的数据并不会绑定事件了。