[英]AJAX jQuery .click Element running function on load instead of click
也許我只是一個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加載時正在運行,那么當我單擊元素時它不起作用。 不知道為什么。
有什么建議么?
您不應該以這種方式傳遞函數調用。
它應該是一個匿名函數 :
$("#"+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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.