Question

因此，我有一个锚定为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;
})

但是，在同一页面中，有一个过滤器允许用户更改年份过滤器，并且一旦更改，下面的代码将执行并附加与{{1}上方的a布局完全相同的项目列表1}}，它假定也要监听上述事件。过滤事件如下：

$('body[data-link="media"] #media_content a')

其中您可以看到项目列表由JS附加到布局中。但是，即使使用相同的布局$('.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>'); } }) })，此类附加项目列表也不会监听$('body[data-link="media"] #media_content a')事件。上面的js代码与html文件分开放在了一个单独的js文件中，在html文件中，我尝试将第一个onclick事件放入html文件中，但是新追加的项目列表仍然无法收听。

目前无法考虑其他解决方法，请帮助查看其原因。谢谢。

Answer 1

也许简单尝试一下。

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

如果您的元素是动态创建的，则应将click事件绑定到文档上并指定元素应该调度该事件的方式。这与仅绑定元素上的click有所不同，因为在删除元素时该事件将取消绑定。

已更新：

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

JSBin

JS：更改过滤器后无法获取对象

1 个答案: