Javascript 在动态生成表中使用按钮时，AJAX函数会触发一次，但不会触发第二次

我有一个问题，我试图导致事件删除元素。此删除事件适用于单击的元素及其上方的对象。下面的ajax调用在应用于一个不改变的按钮时有效，但仅当页面在应用于我想要应用它的按钮时重新加载时有效

/discards a card based upon what button is pressed 
$(".discardCard").on('click',function(){ 
    //alert('button linked') //buttons are linked no longer need
    playerid = $(this).attr("data-xml");
    dCard = $(this).attr("dCard");
    $.ajax({ 
    type: "POST", 
    url: "discardCard.php", 
    data: {player: playerid, dCard:dCard}, 
    success: function(msg){ 
        //alert('ajax function starts');
        $('#playerHands').html(msg);
        //alert('ajax function finishes')
    }
    });
    //alert('1');
});
//alert('2');

下面显示了我打算让活动做什么。获得显示结果的过程是：单击放弃1，刷新页面，单击放弃2

编辑！我需要更多的代表来发布这张照片，但你可以在这里看到：

---

.

当您获得新的HTML时，您需要使其可单击，就像使旧的HTML可单击一样。。。i、 你需要去做。在上面

---

工作完美！谢谢你的帮助！什么是：$.discard.offclick；做

function clickDiscard () { 
    playerid = $(this).attr("data-xml");
    dCard = $(this).attr("dCard");
    $.ajax({ 
        type: "POST", 
        url: "discardCard.php", 
        data: {player: playerid, dCard:dCard}, 
        success: function(msg){  
            $('#playerHands').html(msg);
            // remove existing bindings to avoid double binding...
            $(".discardCard").off("click");
            $(".discardCard").on("click", clickDiscard);
        }
    });
}

$(".discardCard").on("click", clickDiscard);