jQuery click 不适用于新的无限滚动元素 [英] jQuery click won't work with new infinite scroll elements

问题描述

在我的页面上，我有一个项目列表，您可以单击查看更多"按钮，该按钮会显示有关此主题的更多信息.这个点击功能在另一个页面上的 jQuery 中.我在这个页面上实现了一个无限滚动，但现在查看更多"按钮不适用于新元素，只能在第一个元素上使用.

On my page, I have a list with items and you can click on a "View More" button which shows you more information about this topic. This click function is in jQuery on an other page. I've implemented an infinite scroller on this page, but now the button "View More" doesn't work on the new elements, only on the first element.

仅供参考:我没有编写此应用程序的代码，我的任务只是添加无限滚动.

FYI: I didn't code this application, my task is just to add the infinite scroll.

我已经在网上搜索了有关此问题的信息，并且我已经阅读了几次这可能是因为新元素未初始化或其他原因.但我从来没有找到如何解决这个问题.

I've searched the web about this issue and I've read a few times this might be because the new elements aren't initialized or something. But I never found how I could solve this issue.

这里是无限滚动的代码:

Here is the code of the infinite scroller:

varreachedEnd = false;

var reachedEnd = 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;
            }
        });
    }
}

查看更多"点击功能代码:

The code of the "View More" click 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();
});

推荐答案

试试

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

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

Because you should use delegates for dynamically created objects. It will help you to attach events for future elements to be created.

这篇关于jQuery click 不适用于新的无限滚动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！