Javascript 无法识别新卡

我用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');
    }
}

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

function AddNewHandCard(){
GenerateHandCards(singleCard);
}

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

---

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

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

它将事件侦听器直接附加到

.HandCards

中的每个

img

元素，但仅附加到运行此初始化代码时存在的

img

元素。创建新的

img

时，它没有事件侦听器

将代码更改为使用事件委派：

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

---

现在，

.HandCards

元素上有一个事件侦听器，它适用于其中的所有

img

元素，甚至是您稍后添加的元素。当您创建一个新的

img

时，该事件侦听器仍将使用它。

是图像上的单击事件还是带有类名片的div？包括您在其中侦听单击事件的代码。

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