javascript - 在动态生成表格中使用按钮时，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);