JQuery UI кнопки украшения не работает с клоном (true) и удалить () - PullRequest
Новая
       6

JQuery UI кнопки украшения не работает с клоном (true) и удалить ()

0 голосов
/ 27 апреля 2011

Итак, я упростил свой пример до этого: 

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

Тогда оформление кнопки остается ... но недавно добавленная строка застревает соранжевый цвет парения и не меняется обратно, когда вы больше не парите над ним.

Если хуже станет хуже, я просто буду использовать изображения для этих кнопок.Мне было просто интересно, если я что-то упустил.У кого-нибудь есть идеи относительно того, что мне нужно сделать, чтобы исправить одну или обе эти проблемы?

Ответы [ 2 ]

0 голосов
/ 29 апреля 2011

Не лучшее решение, но я получил его, просто заменив диапазон новым, а затем добавив оформление кнопки к новому добавленному диапазону ... Хм, я знаю, но если бы вы могли придумать что-то лучше, я былюблю это слышать: 

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);
0 голосов
/ 27 апреля 2011 
newTR.attr("id", "SECTION_ROW_1");

Каждый раз, когда вы создаете новую строку, вы присваиваете ей один и тот же идентификатор. Идентификаторы должны быть уникальными.

...