javascript - JS : Fail to obtain object after change of filter

Question

因此，我有一个带有 anchor a 的项目列表，它们成功监听以下事件:

$('body[data-link="media"] #media_content a').on('click',function(e){
    e.preventDefault();
    var page = $('.page.active a')[0].innerHTML;
    var date = $('.year_sorting .filter_years').val();
    var id = $(e.currentTarget).data('media');
    window.location.href = 'http://'+basePath+'media/content/'+id+'?date='+date+'&page='+page;
})

但是在同一页面中，有一个过滤器允许用户更改年份过滤器，一旦更改，以下内容将执行并附加与 a 具有完全相同布局的项目列表上面的 $('body[data-link="media"] #media_content a') ，它也应该监听上述事件。过滤事件如下:

$('.activity.filter_years').on('change',function(){
    $('.pagination_ul').remove();
    r_year = $(this).val();
    $.get("media/getActivity",{type:'0',key:r_year}).done(function(d){
        if(d.length>0){
            $('#media_content').html('');
            var ul = '<ul class="ap pagination-sm pagination_ul"></ul>';
            $('.pagination_menu').append(ul);
            for(var i=0;i<d.length;i++){
                var p = ['',''];
                if(!d[i].event_period){
                    p = ['style="color:#8A8A8A;"','style="color:#C7C7C7;"'];
                }


                if(locale=='en'){
                    var event = $('<div class="div_media_content_f2 '+d[i].pagination+' pagination-tr"> <a href="media/content/'+d[i].event_id+'" data-media="'+d[i].event_id+'"> <div class="div_media_content_f2_3"> <span class="font12_bold">'+d[i].event_date+'</span> <div>'+d[i].event_title+'</div></div></a></div>')
                }else if(locale=='hk'){
                    var event = $('<div class="div_media_content_f2 '+d[i].pagination+' pagination-tr"> <a href="media/content/'+d[i].event_id+'" data-media="'+d[i].event_id+'"> <div class="div_media_content_f2_3"> <span class="font12_bold">'+d[i].event_date+'</span> <div>'+d[i].event_title_zh+'</div></div></a></div>')
                }else {
                    var event = $('<div class="div_media_content_f2 '+d[i].pagination+' pagination-tr"> <a href="media/content/'+d[i].event_id+'" data-media="'+d[i].event_id+'"> <div class="div_media_content_f2_3"> <span class="font12_bold">'+d[i].event_date+'</span> <div>'+d[i].event_title_cn+'</div></div></a></div>')
                }

                $('#media_content').append(event);
            }
            pagination('.pagination_ul','.pagination-tr',Math.ceil(d.length/20),false);
        }else{
            $('#div_news_content_right').html('').append('<div class="not_available">No content available</div>');
        }
    })

})

其中您可以看到 JS 正在将项目列表附加到布局中。但是，即使使用相同的布局 $('body[data-link="media"] #media_content a')，此类附加项目列表也不会监听 onclick 事件。上面的 js 代码与 html 文件一起放在一个单独的 js 文件中，我尝试将第一个 a 事件放入 html 文件中，但新附加的项目列表仍然不听。

目前无法想到其他解决办法，请帮忙看看是什么原因造成的。谢谢。

Answer 1

也许简单地尝试一下。

$(document).on('click', 'body[data-link="media"] #media_content a')

如果您的元素是动态创建的，您应该在文档上绑定(bind)单击事件，并定位应调度该事件的元素。这与仅在元素上绑定(bind)单击不同，因为当您删除元素时，该事件将取消绑定(bind)。

<小时/>

更新:

我不确定我是否理解了您拥有的所有脚本，但我尝试简化问题。 这是 jsbin 并且它可以正常工作。

JSBin