jQuery click不适用于新的无限滚动元素

在我的页面上，我有一个包含项目的列表，您可以单击“查看更多”按钮，其中显示有关此主题的更多信息。 此单击函数位于另一页的jQuery中。 我在这个页面上实现了一个无限滚动条，但是现在按钮“查看更多”对新元素不起作用，只对第一个元素有效。

仅供参考：我没有编写这个应用程序的代码，我的任务只是添加无限滚动。

我在网上搜索过这个问题，我读了几遍这可能是因为新元素没有初始化或者其他东西。 但我从未发现如何解决这个问题。

这是无限卷轴的代码：

var reachEnd = false;

$(window).scroll(function() { if ($(window).scrollTop() == $(document).height() - $(window).height()) { lastPostFunc(); } }); function lastPostFunc() { var trs = $('.sresult-row'); /*get the number of trs*/ var count = trs.length; /*this will work as the offset*/ /*Restricting the request if the end is reached.*/ if (reachedEnd == false) { $.ajax({ url: "http://localhost:8080/jingjobs/index.php/search/ajax_searchJob/" + count, async: false, dataType: "html", success: function(data) { if (data != "End") $('.result-bd').append(data); else reachedEnd = true; } }); } } 

“查看更多”点击function的代码：

 $('.click-job-viewmore').click(function(e) { var abtn = $(this).parents('.sresult-row').find('.job-btn-submit'); var abtn_submitted = $(this).parents('.sresult-row').find('.job-btn-submitted'); var requestinterviewbtn = $(this).parents('.sresult-row').find('.jobseeker_request_interview'); var oDom = $(this).parents('.sresult-row').find('.sresult-par2'); var aMark = $(this).parents('.sresult-row').find('.job-mark'); var aViewMore = $(this).find('.job-viewmore'); var aEdit = $(this).find('.job-edit'); if (oDom.css('display') == 'none') { if (window.location.href.indexOf('search/searchJobseeker') > 0) { $.post(site_url + 'user/updateVisitNum', {uid: aViewMore.attr('alt')}, function(result) { }); } aMark.addClass('job-mark2').removeClass('job-mark1'); oDom.slideDown(); abtn.css({display: 'block'}).show(); abtn_submitted.css({display: 'block'}).show(); requestinterviewbtn.css({display: 'block'}).show(); aViewMore.html("View Less"); aViewMore.css({ 'color': '#674092' }); } else { oDom.slideUp(); abtn.hide(); abtn_submitted.hide(); requestinterviewbtn.hide(); aMark.addClass('job-mark1').removeClass('job-mark2'); aViewMore.html("View More"); aViewMore.css({ 'color': '#ea6e3b' }); } e.stopPropagation(); e.preventDefault(); }); 

Answer 1

尝试

 $(document).on("click",".click-job-viewmore",function(e) {}); 

因为您应该使用委托来动态创建对象。 它将帮助您为将来创建的元素附加事件。

Answer 2

 Attach the click event to the document $(document).on('click','element' function(){});