jQuery单击不适用于新的无限滚动元素 [英] 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:

var到达结束=假;

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单击不适用于新的无限滚动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！