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

Question

我遇到了一个问题，我试图让一个事件删除一个元素。此删除事件适用于被单击的元素及其上方的对象。以下 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。

编辑！我需要更多代表来发布一张照片，但你可以在这里看到： http://i963.photobucket.com/albums/ae118/Akado117/Untitled_zps56a2159c.png.

Answer 1

当您获得新的 HTML 时，您需要像使旧的 HTML 可点击一样使其可点击...即您需要对其执行.on()。

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);