创建新对象时会覆盖jquery click事件

Question

我正在编写一个Ajax应用程序，该应用程序使用回调函数将卡添加到玩家手中。正确创建了对象，并且还正确创建了每个对象的菜单。

当创建DOM对象时，在我用来添加对象的回调函数中，我有一些像这样的代码：

$("#card"+cardNum).live('click',function(){                                                         
    $('#cardDiag'+cardNum).dialog('open');
}));

它在第一张卡片创建时有效，但在我绘制第二张卡片后，点击第一张卡片会导致它现在打开第二张卡片的菜单。播放第二张牌后（我删除其菜单）点击任意一张牌都没有任何作用，直到再次抽出一张新牌。

这基本上就是我在ajax的回调处理程序中所做的。

function displayDrawnCardInHand(data){
var newCard = document.createElement('div');
//set some stuff on newCard
//and then add the cardyourHand = document.getElementById('hand');                                    yourHand.appendChild(newCard);
var cardMenu = document.createElement('div');                                      cardMenu.id= 'cardDiag' + data[cardNum];
//and then add the cardMenu to the DOM and call the click hander

Answer 1

修改

现在我看到了您的问题：cardNum将始终针对每次点击事件进行评估，因此无论您第一次分配点击事件时的值是多少，每张卡都会相同。您必须将其作为数据值存储在#card中：

$("#card"+cardNum).live('click',function(){
    num = $(this).data("num");                                               
    $('#cardDiag'+num).dialog('open');
})).data("num", cardNum);

Answer 2

1. 提供更多代码
2. 使用Firebug（您的HTML可能会被堵塞）

---

另外，我建议做一些事情，例如在$.ajax调用之外绑定事件：

$("div[id^=card]").live('click', function() { /* do binding */ });