Javascript jquery按钮样式在html表中不起作用

我有一个页面，试图使用ajax获取数据并将其动态附加到html表中。除了我试图将链接样式设置为jquery按钮的其中一个列之外，一切都正常。我对应用程序中的按钮使用相同的css类，它在所有其他地方都可以正常工作。 就在动态添加的行上，链接显示为普通链接，而不是被命名为jquery按钮。

在单击中使用.button（）方法

$(function(){
    $(".jqbutton").button();

    $("#test").click(function(){
        console.log("button clicked");
        $('<tr>').append(
            $('<td>').text('Test data x'),
            $('<td>').text('Test data y'),
            $('<td>').text('Test data z'),           
            $('<td>').html('<a id="test" class="jqbutton">Click me</a>')
        ).appendTo('#testtable');
        $(".jqbutton").button();

    });
});

$（函数（）{
$（“.jqbutton”）.button（）；
$（“#测试”）。单击（函数（）{
控制台日志（“点击按钮”）；
$（''）。追加(
$（''）.text（'测试数据x'），
$（''）.text（'测试数据y'），
$（''）.text（'testdata z'），
$（''）.html（'
您应该将此

 $(".jqbutton").button();

单击事件处理程序函数

$("#test").click(function(){
    console.log("button clicked");
    $('<tr>').append(
        $('<td>').text('Test data x'),
        $('<td>').text('Test data y'),
        $('<td>').text('Test data z'),           
        $('<td>').html('<a href="#" class="jqbutton">Click me</a>')
    ).appendTo('#testtable');
    $(".jqbutton").button();
});

$（“#测试”）。单击（函数（）{
控制台日志（“点击按钮”）；
$（''）。追加(
$（''）.text（'测试数据x'），
$（''）.text（'测试数据y'），
$（''）.text（'testdata z'），
$（''）.html（''）
).appendTo（“#testtable”）；
$（“.jqbutton”）.button（）；
});
下面是我试图做的事情：在JSFIDLE中，“单击我”按钮和“jqbutton”在所有动态添加的行上，类都是为我设计的。我在Chrome 32上，很有趣。我也在Chrome 32上，直到我将下面的答案中的更改合并到一起，它才对我起作用。几分钟前，我刚刚更新了我的小提琴，添加了额外的一行，没有这一行，按钮就不会设计样式。