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

AJAX function triggers once but not a second time when using buttons in dynamically generate tables

本文关键字:第二次 一次 AJAX 动态 按钮 函数      更新时间:2023-09-26

我有一个问题,我试图导致事件删除元素。此删除事件适用于单击的元素及其上方的对象。以下 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。

当你得到新的 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);