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