jquery click event is overridden when new object is created

Question

I am writing an Ajax application which uses a callback function to add a card to a players hand. the object is created correctly and the menu for each object is also created correctly.

when created the DOM object, in the callback function i use to add the object, i have some code like this:

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

it works when the first card is created, but after i draw the second card, clicking on the first one causes it to now open up the menu for the second card. and after the second card is played (and i delete its menu) clicking on any card does nothing until a new card is drawn once again.

this basically is what i am doing in the callback handler for 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

1. Provide more code
2. Use Firebug (your HTML may be getting borked)

---

Also, I would recommend doing something like binding the event outside the $.ajax call:

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

Answer 2

Edit

Now I see your problem: cardNum will always be evaluated for each click event, so it will be the same for each card no matter what the value was when you first assigned the click event. You'll have to store it in the #card as a data value:

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