AJAX jQuery .click元素在加載而不是點擊運行函數

Question

也許我只是一個jQuery noob，但我不明白爲什麼當我設置元素加載時運行的.click事件。

代碼：

//Deal Cards button 
$(".draw-cards").click(function(){ 
    var playerId = 1; 
    var gameId = 20; 
    $.ajax({ 
     type: 'GET', 
     url: './system/actions/draw.php', 
     data: "playerId=" + playerId, 
     success: function(data) { 
      //Post to Player Card container 
      $('#player-cards').html(data); 
      //Resize Fonts 
      fontSize(); 
      //For each loaded check if usable 
      $(".card").each(function() { 
       var cardId = $(this).attr('id'); 
       comparePlayerCard(cardId, function(data) { 
        console.log(data); 
        if (data == 1){ 
         $("#"+cardId+".card").css('box-shadow', '0px 0px 12px 6px #00ff40'); 
         $("#"+cardId+".card").click(addCardToInventory(playerId, gameId, cardId)); // <---- PROBLEM CODE 
        } 
       }); 
      }); 
     } 
    }); 
}); 

在函數內部

$("#"+cardId+".card").click(addCardToInventory(playerId, gameId, cardId)); 

正在運行時，通過AJAX元素的負荷，那麼它不會當我點擊的單元工作。不知道爲什麼。

有什麼建議嗎？

Answer 1

你不應該這樣傳遞函數調用。

應該匿名函數：

$("#"+cardId+".card").click(function() { 
    functionaddCardToInventory(playerId, gameId, cardId); 
}); 

它通常是最合適的方法，但它是一個不好的做法，使用循環中的匿名功能。

或者也可以不帶參數一個功能：

$("#" + cardId + ".card").click(functionaddCardToInventory); 

在這種情況下，你能描述你的價值觀作爲一個全球性的價值或內data屬性：

HTML：

<div id="cardId" class="card" data-game-id="7" data-card-id="11"></div> 

JS：

var playedId = 14;  

function functionaddCardToInventory() 
{ 
    var cardId = $(this).data("card-id"); 
    var gameId = $(this).data("game-id"); 
    // and playerId is global 
} 

// Function without arguments can be passed this way 
$("#" + cardId + ".card").click(functionaddCardToInventory);