Question

我用5张卡加载我的页面，我可以点击并与之交互。点击其中一个后，它会消失并出现一张新卡。唯一的问题是我无法与新的互动。我是JavaScript的新手，所以这可能是一个基本的错误。这也是我的第一个问题所以请告诉我你是否还需要其他东西来解决这个问题。

function GenerateHandCards(amount){
    for(var tagCounter = 1; tagCounter <= amount; tagCounter++){
        var myHandCard = DrawCard();
        var CardImage = $("<img id = '"+myHandCard.rank+ "_"+myHandCard.suit+"'>");
        CardImage.attr("src","CardImages/" + myHandCard.rank + "_of_" +myHandCard.suit + ".png");
        CardImage.appendTo('.HandCards');
    }
}

上面的线条从我的牌组中抽出一张牌

生成一个img标签并将其附加到我的部门。

这是点击事件。对不起，我忘了把它包括在内。

$(".HandCards img").click(function() {
    var card = (this.id);
    CompareCards(card);
    $(this).remove();
    NewFieldCard();
    AddNewHandCard();
})

以下是最后两个函数的代码行，以防您需要它们以便更好地理解。

function AddNewHandCard(){
GenerateHandCards(singleCard);
}

function NewFieldCard(){
$(".FieldCard img").remove();
GenerateFieldCard();
}

Answer 1

您的页面初始化中有以下代码：

$(".HandCards img").click(function() {
    // ...
});

将事件侦听器直接附加到img内的每个.HandCards元素，但仅限于运行此初始化代码时存在的img元素。当您创建新的img时，它没有事件侦听器。

更改代码以使用事件委派：

$(".HandCards").on( "click", "img", function() {
    // ...
});

现在.HandCards元素上有一个事件监听器适用于其中的所有img元素，即使是稍后添加的元素也是如此。当您创建新的img时，该事件侦听器仍然可以使用它。

Javascript新卡无法识别

1 个答案: