0

あいまいなタイトルで申し訳ありません。私の質問にタイトルを付ける方法が思いつきませんでした。そこで、各行に編集ボタンを配置した html/css テーブルを作成しました。ボタンを押すと、ユーザーが内部のデータを編集できるようにすることで、特定のテキスト フィールドがテキスト入力フィールドに変換されます。同時に、編集ボタンが保存ボタンに変わります。編集後、ユーザーが保存ボタンを押すと、テキスト入力フィールドはテキスト フィールドに戻り、保存ボタンは編集ボタンに戻ります。しかし、それは完全に機能しているわけではありません

これは私の問題です。内部のデータを編集した後、保存ボタンを押すと、内部のデータが削除され、次のように置き換えられ<input type= and outside the text-input field is: " /> ます。保存ボタンはそのままで、「保存」ボタンのままで、「編集」ボタンには戻りません。

スクリプトは次のとおりです。

$(document).ready(function () {

    // listen for email edit button click
    $("button#edit").on('click', function () {
        // get email inline to this edit button
        var email = $(this).parent().siblings('td.email').html();
        alert(email);

        // change button from edit to save
        $(this).attr('id', 'save-email').html('SAVE');

        // change email display to input field
        $(this).parent().siblings('td.email').html('<input type="text" id="user-email" value="' + email + '" />');
    });

    // listen for email save button click
    $("button#save-email").on('click', function () {

        // get new email inline to this save button
        var newEmail = $(this).parents('tr').find($('input#user-email')).val();
        alert(newEmail);

        // change input field back to display
        $(this).parent().siblings('td.email').html(email);

        // change button from save to edit
        $(this).attr('id', 'edit').html('EDIT');
    });
});

テキストの壁で申し訳ありません。

4

4 に答える 4

1

このように言ってみてください：

$(document).on('click',"button#save-email", function() {...

それ以外の

$("button#save-email").on('click', function()

実行時に $("button#save-email") がまだ存在しないため、2 番目のものを使用しても機能しません。

于 2013-07-31T11:34:06.590 に答える
0

問題は、最初のハンドラーだけがスクリプトにアタッチされていることです。

ページの準備が整うと、JavaScript コードが実行されます。
その時点では、要素がまだないため、最初のハンドラーのみがアタッチされますbutton#save-email。保存をクリックすると、再び実行されるのは最初のハンドラーであり、考えるものではありません!

2 つの異なるボタンを作成して、どちらか一方を表示してみませんか?

<table>
    <tr>
        <td class="email">myemail@domain.com</td>
        <td>
            <button class="btn-edit">Edit</button>
            <button class="btn-save" style="display:none">Save</button>
        </td>
    </tr>
    <tr>
        <td class="email">myemail@domain.com</td>
        <td>
            <button class="btn-edit">Edit</button>
            <button class="btn-save" style="display:none">Save</button>
        </td>
    </tr>
</table>

Javascript

// listen for email edit button click
$('.btn-edit').on('click', function() {

    var $this = $(this),
        $parentRow = $this.closest('tr');

    // get email inline to this edit button
    var email = $this.parent().siblings('td.email').html();

    // change button from edit to save
    $parentRow.find('.btn-edit').hide();
    $parentRow.find('.btn-save').show();

    // change email display to input field
    $(this)
        .parent()
        .siblings('td.email')
        .html('<input type="text" id="user-email" value="'+email+'" />');
});

// listen for email save button click
$('.btn-save').on('click', function() {

    var $this = $(this),
        $parentRow = $this.closest('tr');

    // get new email inline to this save button
    var newEmail = $(this).parent().siblings('td.email').find('#user-email').val();

    // change input field back to display
    $(this).parent().siblings('td.email').html(newEmail);

    // change button from save to edit
    $parentRow.find('.btn-edit').show();
    $parentRow.find('.btn-save').hide();

});

デモ

于 2013-07-31T11:45:47.547 に答える