fnUpdate removes events from updated rows
fnUpdate removes events from updated rows
pixelgeek
Posts: 18Questions: 2Answers: 0
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]
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]
This discussion has been closed.
Replies
Allan
[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.