Question

所以我的javascript中有一个infinite scroll系统。首先它加载50个项目，然后如果你向下滚动一点然后另外50个项目。这个问题是，如果你向下滚动并点击项目没有任何反应。如果您首先加载页面并且有50个项目，如果您单击其中一个项目，那么它将变为red并变为selected，但在您加载其他金额之后，clicking 1}}不再起作用了。

这是我的`infite scroll的代码：

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 click

的代码

            $(".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

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

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

一般语法

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

实施例

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

此外，您可以使用append()

将参数指定的内容插入匹配元素集中每个元素的末尾。

$("#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>");

Answer 2

尝试更换

$(".item-card").click(function() { ...

使用

$(document).on("click", ".item-card", function(){ ...

Javascript - 点击事件在“无限滚动”后不再起作用

2 个答案: