fnUpdate removes events from updated rows

pixelgeek

I have some code that adds a new row to a table. One of the cells has some HTML and I manually attached an event trigger to that span via jQuery.

Works fine and when you add a card, in this case, to the other table it displays correctly and when you click on the name you have a small bootstrap popover that shows the card.

When I call fnUpdate when I add another of those cards to the table (it just updates the data in the row) the events do not trigger. In fact using the Visual Event bookmarklet I can see that the event has been removed from the span.

Is there any way to avoid having fnUpdate do this? Or am I going to have to manually add the event back again each time I update the row?

Page is online at http://wp.arcanewonders.com/mw/

[code]
var addCardToDeck = function(listTr) {

// store the card code and the card type for later use
var code = listTr.data('code')
var cardType = listTr.data('type')
var shortCardType = getCardShortName (cardType)

// check to see if the card has been added
deckTr = getDeckTr(code)
var table = deckTable.dataTable()

// if deckTR is null we haven't added the card yet
if(!deckTr) {

// build up the HTML for the card name including the minus buttins
var cardNameHTML = ''
cardNameHTML += ' '
cardNameHTML += ''
cardNameHTML += getCardName(code) + ''

// set the defaults for the card
var newCard = table.fnAddData({
code:code,
amount:1,
name: cardNameHTML,
type:getCardShortName(cardType),
cost: getCardCost(code)
})

// get the row we added and style the card type cell
var nTr = table.fnSettings().aoData[ newCard[0] ].nTr;
nTr.cells.item(1).className = cardType // the card type cell is 1

// get the name span in the cell adn apply an event to it
var nameSpan = $('span', nTr.cells.item(0))

// add the popover event to the name span
nameSpan.popover ({
animation:'true',
placement: 'fixed',
html:'true',
trigger:'click',
container:'body',
content:'Default Content'
})

// set the event for the card preview popover
$(nameSpan).on('show.bs.popover', assignPopoverContent)

} else {

// we have added the card already so just add another
data = table.fnGetData(deckTr[0])
var maxCardNum = getCardMax(code)
var newTotal = data.amount + 1

// give the user an alert if there are not enough cards in their set
if (newTotal > maxCardNum) {
alert ("You don't have enough cards of that type to add to your spellbook")
} else {
data.amount = Math.min(newTotal, maxCardNum)
table.fnUpdate(data, deckTr[0])
}

}
}
[/code]

allan

Don't use a static event - but rather a delegated one (same as http://datatables.net/faqs#events ). fnUpdate uses innerHTML to write the content, so it will overwrite any existing events, as with any DOM manipulation.

Allan

pixelgeek

Isn't this

[code]$(nameSpan).on('show.bs.popover', assignPopoverContent)[/code]

a delegated event?

The reason I added this code initially is that the existing delegated event I created earlier wasn't propagating to the HTML in the new table rows.

I have a similar event declaration in my initialization code for the app but it doesn't appear to get applied to the new elements that I create.