当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How can I refresh a table that contains JQuery mobile buttons wirthout losing formatting

问题描述:

I have created a function that generates a table of JQuery mobile buttons; using JavaScript (This is called in the document ready function), using the following code - this works fine:

function renderButtons() {

console.log(coaches);

var coachButtonsHTML = "";

coachButtonsHTML += "<table align='center' class='full_width_table'>" +

"<tr>" +

"<td class='cellpadding'><div id='0' data-role='button' data-position-to='window' data-mini='true' onclick='coachSelect(this.id)'>Coach A " + "(" + coaches[0].value + ")" + "</div></td>" +

"<td class='cellpadding'><div id='1' data-role='button' data-position-to='window' data-mini='true' onclick='coachSelect(this.id)'>Coach B " + "(" + coaches[1].value + ")" + "</div></td>" +

"<td class='cellpadding'><div id='2' data-role='button' data-position-to='window' data-mini='true' onclick='coachSelect(this.id)'>Coach C " + "(" + coaches[2].value + ")" + "</div></td>" +

"</tr>" +

"<tr>" +

"<td class='cellpadding'><div id='3' data-role='button' data-position-to='window' data-mini='true' onclick='coachSelect(this.id)'>Coach D " + "(" + coaches[3].value + ")" + "</div></td>" +

"<td class='cellpadding'><div id='4' data-role='button' data-position-to='window' data-mini='true' onclick='coachSelect(this.id)'>Coach E " + "(" + coaches[4].value + ")" + "</div></td>" +

"<td class='cellpadding'><div id='5' data-role='button' data-position-to='window' data-mini='true' onclick='coachSelect(this.id)'>Coach F " + "(" + coaches[5].value + ")" + "</div></td>" +

"</tr>" +

"</table>";

$('#coach_buttons').append(coachButtonsHTML).trigger('create');

}

The problem is that I am updating the values within the buttons in a different function, and trying to update the buttons by calling the render function - renderButtons();. This leads the problem of having two sets of buttons.

So I tried using this line of code to "update" the table:

$('#coach_buttons').append(coachButtonsHTML).trigger('update');

Using this code renders the button values, however there is no formatting (its just text no button).

Does anyone know of a way to get around this?

Thanks for your time.

网友答案:

I fixed this using the following line of code -

$('#coach_buttons').html(coachButtonsHTML).trigger('create');

This means that it doesn't create duplicates and keeps the formatting as it replaces the html, whereas the other one added to it.

分享给朋友:
您可能感兴趣的文章:
随机阅读: