jquery ui 按钮在单击按钮时未正确呈现到 table 行

Question

我面临的问题是，当我向文本框添加一些数据并单击 "create" 时，第三列中呈现的按钮正在丢失其 jquery ui css。以下是 fiddle link： http://jsfiddle.net/evazrp6o/1/

这是我的 html:

<div id="protocolParMain">
<table class="userTable">
<tr>
    <th class="uName">Username</th>
    <th class="uLevel">Level</th>
    <th class="uOpt">Options</th>
</tr>

<tr>
    <td class="cellEditable" contenteditable="false">User 1</td>
    <td class="cellEditable" contenteditable="false"> User</td>
    <td><button class="edit">Edit</button>
        <button class="del">Delete</button>
        <button class="apply">Apply</button></td>
</tr>

<tr>
    <td class="cellEditable" contenteditable="false">User 2</td>
    <td class="cellEditable" contenteditable="false"> User</td>
    <td><button class="edit">Edit</button>
        <button class="del">Delete</button>
        <button class="apply">Apply</button></td>
</tr>

 </table>
 <p>Add User</p>
<div class="clear"></div>
<label for="usr">Username</label>
<input type="text" name="usr" id="usr">
<label for="pwd">Password</label>
<input type="password" name="pwd" id="pwd">
<button id="create">Create</button>

这是我的 jquery:-

$("#create").button().click(function(){


    var tr=$('<tr></tr>');
    var td_username=$('<td></td>',{
        text:  $("#usr").val()
    }).appendTo(tr);

    var td_level=$('<td></td>', {
        text: "User"
    }).appendTo(tr);

    var td_buttons=$('<td></td>',{
        html: '<button class="edit">Edit</button> <button class="del">Delete</button> <button class="apply">Apply</button>'
    }).appendTo(tr);

    $(".userTable").append(tr);

});


    $(".edit").button().click(function() {
        var currentItem = $(this).parents("tr").find("td");
            $.each(currentItem, function(){
                $(this).prop("contenteditable",true);
                $(this).css("border-color","red");
            });
    });

    $(".del").button().click(function(){
       var currentItem=$(this).parents("tr").find("td");
        $.each(currentItem,function(){
            $(this).remove();
        });
    });

    $(".apply").button().click(function(){
        var currentItem=$(this).parents("tr").find("td");
        $.each(currentItem,function(){
            $(this).prop("contenteditable",false);
            $(this).css("border-color","");
        });

    });

您会在 fiddle 中找到其余部分。谢谢。

Answer 1

Updated fiddle.

您的代码经过 3 次更改后运行良好。

你必须使用 on() 事件而不是 click() 这样你就可以处理用 [=55= 添加的新元素] 例如（编辑、删除、应用按钮），所以全部替换：
```
$("selector").button().click(function() {
```
作者：
```
$(document).on('click', 'selector',function(){
```
您必须使用 css 初始化页面中所有按钮的样式：
```
$(document).find('button').button();
```
在 create 按钮相关的点击事件中，尝试先将 jquery-ui 样式应用于 3 个按钮，然后将它们添加到 tr :
```
$(tr).find('button').button();
$(".userTable").append(tr);
```

完整的 JS :

//Init all page buttons 
$(document).find('button').button();

$(document).on('click', '#create',function(){

    var tr=$('<tr></tr>');
    var td_username=$('<td></td>',{
        text:  $("#usr").val()
    }).appendTo(tr);

    var td_level=$('<td></td>', {
        text: "User"
    }).appendTo(tr);

    var td_buttons=$('<td></td>',{
        html: '<button class="edit">Edit</button> <button class="del">Delete</button> <button class="apply">Apply</button>'
    }).appendTo(tr);

    $(tr).find('button').button();
    $(".userTable").append(tr);

});


$(document).on('click', '.edit', function() {
    var currentItem = $(this).parents("tr").find("td");
    $.each(currentItem, function(){
        $(this).prop("contenteditable",true);
        $(this).css("border-color","red");
    });
});

$(document).on('click', '.del',function(){
    var currentItem=$(this).parents("tr").find("td");
    $.each(currentItem,function(){
        $(this).remove();
    });
});

$(document).on('click', '.apply',function(){
    var currentItem=$(this).parents("tr").find("td");
    $.each(currentItem,function(){
        $(this).prop("contenteditable",false);
        $(this).css("border-color","");
    });

});

希望对您有所帮助。

jquery ui 按钮在单击按钮时未正确呈现到 table 行

jquery ui buttons not getting rendered correctly to the table row upon button click

jquery

html

jquery-ui

button

css-tables