2

一番下の行の入力の 1 つにテキストを入力すると、新しい行が自動的に追加される入力のテーブルを作成しようとしています。ほとんどの場合、問題なく動作します。ただし、jQuery UI のチェックボックス ボタンに問題があります。

チェックボックスボタンは、クリックするとアイコンが変わるはずです。これは元のボタンでは問題なく機能しますが、新しい行を追加したときに表示される複製されたボタンは正しく機能しません。

こちらの jsfiddle で確認できます。問題を再現するには、3 番目の入力にテキストを入力します。4 行目が表示されます。4 番目のチェックボックスを押すと、3 番目のチェックボックスのアイコンが変化します。間違ったボタンも ui-state-focus を取得しますが、実際にはフォーカスを取得しません。これは本当に私を困惑させますが、正しいボタンは ui-state-active を取得し、私が知る限り、チェックされたと評価するようですちゃんと。

明確にするために、2 つのチェックボックスは同じ ID を持っておらず、それらのラベルは右側のチェックボックス用です - createNewRow() 関数がそれを処理します。チェックボックスを jQuery UI チェックボックスに変える行をコメント アウトすると、すべて正常に動作することがわかります。buttonSwitchCheck 関数で $(this).attr('id') の値を console.log に記録すると、そこにも正しい ID があることがわかります。4 番目のボタンをクリックすると、そのことがわかります。 $(this) の id は "test4" ですが、アイコンが変更されるのは "test3" (3 番目のボタン) です。

私はこれを見つめて怒っています。人々が与えることができる助けをいただければ幸いです。コードは次のとおりです。

// Turns on and off an icon as the checkbox changes from checked to unchecked.
function buttonSwitchCheck() {
    if ($(this).prop('checked') === true) {
        $(this).button("option", "icons", {
            primary: "ui-icon-circle-check"
        });
    } else {
        $(this).button("option", "icons", {
            primary: "ui-icon-circle-close"
        });
    }
}

// Add a new row at the bottom once the user starts filling out the bottom blank row.
function createNewRow() {
    // Identify the row and clone it, including the bound events.
    var row = $(this).closest("tr");
    var table = row.closest("table");
    var newRow = row.clone(true);
    // Set all values (except for buttons) to blank for the new row.
    newRow.find('.ssheet').not('.button').val('');
    // Find elements that require an ID (mostly elements with labels like checkboxes) and increment the ID.
    newRow.find('.ssheetRowId').each(function () {
        var idArr = $(this).attr('id').match(/^(.*?)([0-9]*)$/);
        var idNum = idArr[2] - 0 + 1;
        var newId = idArr[1] + idNum;
        $(this).attr('id', newId);
        $(this).siblings('label.ssheetGetRowId').attr('for', newId);
    });
    // Add the row to the table.
    newRow.appendTo(table);
    // Remove the old row's ability to create a new row.
    row.removeClass('ssheetNewRow');
    row.find(".ssheet").unbind('change', createNewRow);
}

$(document).ready(function () {
    // Activate jQuery UI checkboxes.
    $(".checkButton").button().bind('change', buttonSwitchCheck).each(buttonSwitchCheck);

    // When text is entered on the bottom row, add a new row.
    $(".ssheetNewRow").find(".ssheet").not('.checkButton').bind('change', createNewRow);
});

編集:私は解決策を見つけることができました。これを年齢とともに共有します。以下の「Funky Dude」に感謝します.

トリックは、クローンの前に元の行の jQuery UI ボタン​​を破棄し、その後すぐに元の行とコピーの両方で再初期化することです。change イベントをバインド解除して再バインドする必要はありません。問題があるのは jQuery UI ボタン​​だけです。createNewRow 関数では:

row.find('.checkButton').button('destroy');
var newRow = row.clone(true);
row.find('.checkButton').add(newRow.find('.checkButton')).button().each(buttonSwitchCheck);
4

2 に答える 2

2

委任を可能にする新しい方法を使用してみてください.on。これは、DOMへの動的な変更に役立ちます。

$(".checkButton").button().each(buttonSwitchCheck);
$("table").on("change", ".checkButton", buttonSwitchCheck);

よくわかりませんが、イベントを特定の要素にバインドすることを心配する必要がない場合に役立つ可能性があります。

changeまた、テキストボックスイベントに使用することもできます。

$("table").on("change", ".ssheetNewRow .ssheet:not(.checkButton)", createNewRow);

これが私の変更のフィドルです：http：//jsfiddle.net/Cugb6/3/

機能に違いはありませんが、私にとっては少しすっきりしています。buttonウィジェットの問題により、問題は解決したと思いましたが、明らかに解決していません。

そして面白いことに、彼らはクローン作成を「サポート」していないようです：http: //bugs.jqueryui.com/ticket/7959

于 2013-02-12T18:19:02.253 に答える
1

イベントハンドラーのクローンも作成するディープクローンを使用していると思います。新しい行の作成関数で、変更イベントのバインドを解除してから、クローンで再バインドしてみてください。

于 2013-02-12T18:26:07.433 に答える