Question

我创建了一个生成JQuery移动按钮表的函数;使用JavaScript（这在文档就绪函数中调用），使用以下代码 - 这很好用：

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');
}

问题是我正在更新不同函数中按钮内的值，并尝试通过调用渲染函数来更新按钮 - renderButtons();。这导致了具有两组按钮的问题。

所以我尝试使用这行代码来＆＃34;更新＆＃34;表：

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

使用此代码呈现按钮值，但没有格式化（它只是文本没有按钮）。

有没有人知道如何解决这个问题？

Answer 1

我使用以下代码行修正了这个问题 -

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

这意味着它不会创建重复项并保留格式，因为它会替换html，而另一个会添加到它。

如何在不丢失格式的情况下刷新包含JQuery移动按钮的表

1 个答案: