jquery-ui - 如何添加动态jquery按钮？

Question

我有一个表，我在其中使用 jquery 添加和删除行。我还使用 jquery ui 来呈现按钮。

当我添加一个新行时，我也在一个单元格中添加了一个按钮，但没有呈现这个按钮。

var tdata = "<tr>";
tdata += "<td align=\"right\">my data</td>";
tdata += "<td align=\"left\">";
tdata += "<button class=\"delete\">delete</button>";
tdata += "</td>";
tdata += "</tr>";

jQuery('#mytable > tbody:last').append(tdata);

任何想法，如何解决这个问题？

谢谢

更新 1

看起来我忘了发布一个重要的细节:

$(document).ready(function() {  
jQuery('button.delete').button();
}

这在加载页面后有效，但不适用于新行。

Answer 1

在 ready() 函数中，您正在创建 jquery-ui 样式的按钮，但它们仅适用于当前存在的按钮。

因此，动态添加的按钮不会将其应用于它们，因此您必须修改 addRow 函数以应用与新创建的标记相关的 button() 调用。

像这样:

var tdata = "<tr>";
tdata += "<td align=\"right\">my data</td>";
tdata += "<td align=\"left\">";
tdata += "<button class=\"delete\">delete</button>";
tdata += "</td>";
tdata += "</tr>";
var tdataElement = jQuery(tdata);
jQuery('button.delete',tdataElement).button();
jQuery('#mytable > tbody:last').append(tdataElement);