Javascript - 单击事件在 "infinite scroll"之后不再起作用

Question

所以我的 javascript 中有一个无限滚动系统。首先它加载 50 个元素，然后如果你向下滚动一点然后再加载 50 个元素。问题在于，如果您向下滚动并单击元素，则什么也不会发生。如果您首先加载页面并且有 50 个元素，如果您单击其中一个元素，它会变为 红色 并变为 已选择，但是在您加载另一个元素之后金额，然后 clicking 不再起作用。

这是我的“无限滚动”代码:

var perPage = 50;

function paginate(items, page) {
    var start = perPage * page;
    return items.slice(start, start + perPage);
}
var condition = '';

function renderItems(pageItems) {
    pageItems.forEach(function(item, index, arr) {
        var message = 'BitSkins Price: $' + item.bprice + '';
        if (item.price != null) {
            if (item.bprice == '') {
                message = 'Item never sold on BitSkins!';
            }
            if (item.name != 'Operation Phoenix Case Key' && item.name != 'CS:GO Case Key' && item.name != 'Winter Offensive Case Key' && item.name != 'Revolver Case Key' && item.name != 'Operation Vanguard Case Key' && item.name != 'Operation Wildfire Case Key' && item.name != 'Shadow Case Key' && item.name != 'Operation Breakout Case Key' && item.name != 'Chroma Case Key' && item.name != 'Huntsman Case Key' && item.name != 'Falchion Case Key' && item.name != 'Chroma 2 Case Key') {
                $("#inventory").html($("#inventory").html() + "<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + numberWithCommas(item.price) + "</li></div></div>");
            }
        }
    });
}
var win = $(window);
var page = 0;
renderItems(paginate(items, page));
win.scroll(function() {
    if ($(document).height() - win.height() == win.scrollTop()) {
        page++;
        renderItems(paginate(items, page));
    }
});

这是我的元素点击代码

            $(".item-card").click(function() {
            var itemnume = $(this).find("img").attr("title");
            var buyerprice = $(this).find(".buyer-price").html();
            var replaced = itemnume.split(' ').join('_');
            replaced = replaced.split('(').join('');
            replaced = replaced.split(')').join('');
            replaced = replaced.split('|').join('');

            if ($(this).hasClass('selected-item')) {
                $("#" + replaced).last().remove();
            } else {
                var cart_item = $("<div id=" + replaced + ">" + itemnume + "</div>");
                $("#itemcart").append(cart_item);
                $("#itemcart div").each(function() {
                    if ($(this).children().length > 0) {

                    } else {
                        $(this).append($("<span> " + buyerprice + "</span>"));
                    }
                });
                var self = $(this);
                cart_item.on('click', 'span', function() {
                    $(this).parent().remove()
                    self.removeClass("red lighten-1 white-text selected-item");
                    calculateTotal();
                });
            }
            $(this).toggleClass("red lighten-1 white-text selected-item");

            calculateTotal();
        });

Answer 1

目前您使用的称为“直接”绑定(bind)，它只会附加到您的代码进行事件绑定(bind)调用时页面上存在的元素。

您需要使用 Event Delegation使用 .on()委托(delegate)事件方法，在动态生成元素或替换内容时。

一般语法

$(document).on('event','selector',callback_function)

示例

$("#inventory").on('click', ".item-card", function(){
    //Your code
});

---

另外你可以使用 append()

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

$("#inventory").append("<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + numberWithCommas(item.price) + "</li></div></div>");

代替

$("#inventory").html($("#inventory").html() + "<li class='col 2 zoomIn animated' style='padding:8px;font-weight:bold;font-size:16px'><div class='card item-card waves-effect waves-light' style='margin:0%;min-height:295px;width:245.438px;border-radius: 15px;' id='" + item.id + "'><div class='iteam' style='text-decoration: underline;text-align: left'>" + item.name + "</div><div class='condition' style='text-align: left;text-size:13px'>" + item.condition + "</div><div class='center-align' style='padding:6%'><img title=\"" + item.originalname + "\" draggable='false' src='https://steamcommunity-a.akamaihd.net/economy/image/" + item.iconurl + "/200fx200'><div class 'floatvalue'>Float: 0.11503319442272186<div class='bitskinscomp' style='font-weight: normal;font-size:12px'>" + message + "</div><div class='buyer-price center-align'>$" + numberWithCommas(item.price) + "</li></div></div>");