jQuery UI的按钮，装修不是克隆（真）和删除工作（）

所以我简化我的例子下降到这一点：jQuery UI的按钮，装修不是克隆（真）和删除工作（）

<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>

如果您单击添加按钮，将正确添加一行。现在点击刚刚添加的行上的删除按钮，然后您会看到我的问题。第一排放弃它的用户界面按钮装饰。

如果我改变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(); 
    });

然后按钮装饰停留......但新添加的行卡与橙色悬停颜色，当你未恢复不再徘徊在它上面。

如果损坏程度更差，我将只使用图像这些按钮。我只是想知道我是否错过了一些东西。有没有人有任何想法，我需要做些什么来解决这些问题中的一个或两个？

来源

2011-04-27 testing123

我使用了最新版本的jquery。 – testing123 2011-04-29 16:45:44

不是最好的解决办法，但我得到了它的只是那么一个新添加的按钮装饰新添加的跨度更换跨度工作时...跛脚我知道，但如果你能拿出更好的东西我很想听听它：

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

来源

2011-04-29 17:40:59 testing123

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

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

来源

2011-04-27 17:04:03

我很欣赏答案，但正如我在顶部所说：“我简化了我的例子”。如果只添加一行，则没有行具有相同的ID。在我的实际应用程序中，我增加了id，问题依然存在。只需点击一下，然后尝试删除它，您就会看到问题。 – testing123 2011-04-29 16:09:47

jQuery UI的按钮，装修不是克隆（真）和删除工作（）

回答

相关问题