Question

所以我将我的例子简化为：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="/ihe/resources/jquery/css/ui-lightness/jquery-ui-1.8.12.custom.css" />
    <script type="text/javascript" src="/ihe/resources/jquery/jquery.js"></script>
    <script type="text/javascript" src="/ihe/resources/jquery/jquery-ui-1.8.12.custom.min.js"></script>
    <script type="text/javascript">
    $(function() {
    $(".addSectionRow").button().click(function() 
    {   
        var prevTR = $(this).closest("tr[id^='SECTION_ROW_']");
        var newTR = prevTR.clone(true, true);
        newTR.attr("id", "SECTION_ROW_1");
        prevTR.after(newTR);
    });

    $(".deleteSectionRow").button().click(function() 
    {
        var rowToRemove = $(this).closest("tr[id^='SECTION_ROW_']");
        rowToRemove.remove();
    });
    });
    </script>
</head>
<body>
<table id="SECTION_TABLE">
    <tr id="SECTION_ROW_0">
        <td><div class="addSectionRow">Add</div></td>
        <td><div class="deleteSectionRow">Remove</div></td>
    </tr> 
</table>
</body>
</html>

如果单击“添加”按钮，则会正确添加行。现在单击刚添加的行上的删除按钮，然后您将看到我的问题。第一行失去了它的ui按钮装饰。

如果我更改javascript来改为：

$(".addSectionRow").button().live("click", function() 
    {   
        var prevTR = $(this).closest("tr[id^='SECTION_ROW_']");
        var newTR = prevTR.clone();
        newTR.attr("id", "SECTION_ROW_1");
        prevTR.after(newTR);
    });

    $(".deleteSectionRow").button().live("click", function() 
    {
        var rowToRemove = $(this).closest("tr[id^='SECTION_ROW_']");
        rowToRemove.remove();
    });

然后按钮装饰保持...但新添加的行会卡住橙色悬停颜色，并且当您不再悬停在其上时不会改回。

如果情况变得更糟，我会将图像用于这些按钮。我只是想知道我是否遗漏了一些东西。有没有人对我需要做些什么来解决其中一个或两个问题？

Answer 1

newTR.attr("id", "SECTION_ROW_1");

每次创建新行时，都会为其分配相同的ID。 ID应该是唯一的。

Answer 2

不是最好的解决方案，但我通过用新的替换跨度然后将按钮装饰添加到新添加的跨度来实现它......跛脚我知道，但是如果你能想出更好的东西我会喜欢听到它：

var prevTR = $(this).closest("tr[id^='SECTION_ROW_']");
var newTR = prevTR.clone();

var addButton = newTR.find(".addSectionRow");
var addButtonParent = addButton.parent("td");
addButtonParent.html("<span class='addSectionRow'>"+addButton.text()+"</span>");
addButtonParent.find(".addSectionRow").button();

var deleteButton = newTR.find(".deleteSectionRow");
var deleteButtonParent = deleteButton.parent("td");
deleteButtonParent.html("<span class='deleteSectionRow'>"+deleteButton.text()+"</span>");
deleteButtonParent.find(".deleteSectionRow").button();

prevTR.after(newTR);

jquery ui按钮装饰不使用clone（true）和remove（）

2 个答案: