0

ユーザー入力用のキャンセル ボタンをコーディングしようとしています。ユーザーはアイテムをダブルクリックした後にアイテムを編集でき、キャンセル ボタンを使用してアクションをキャンセルできます。

テキスト入力ボックスにキャンセル ボタンが付いているので、コードのダブルクリック部分はうまく機能します。しかし、DOM が変更されたため、jQuery は新しい要素を選択しなくなりました。そのため、キャンセル ボタンをクリックしてもイベントは発生しません。説明のために、コードは次のとおりです。

<div id="main">
<ul class="todoList">
    <li id="todo-1" class="todo">
        <div class="text">New Todo Item. Doubleclick to Edit
         </div>
        <div class="actions"> <a href="#" class="edit">Edit</a></div>
    </li>
</ul>
</div>

var currentTODO;
$('.todo').on('dblclick', function () {
    $(this).find('a.edit').click();
});

$('.todo a').on('click', function (e) {
    e.preventDefault();
    currentTODO = $(this).closest('.todo');
});

$('.todo a.edit').on('click', function () {

    var container = currentTODO.find('.text');

    if (!currentTODO.data('origText')) {
        // Saving the current value of the ToDo so we can
        // restore it later if the user discards the changes:

        currentTODO.data('origText', container.text());
    } else {
        // This will block the edit button if the edit box is already open:
        return false;
    }

    $('<input type="text">').val(container.text()).appendTo(container.empty());

    container.append(
        '<div class="editTodo">' +
        '<a class="cancel" href="#">Cancel</a>' +
        '</div>');

});

// The cancel edit link:

$('.cancel').on('click', function () {
    alert("oops");
});

またはここ: http://jsfiddle.net/S7f83/42/

したがって、私の質問は、DOM が変更された後にイベントを「バインド」するにはどうすればよいですか? どうもありがとうございました

4

3 に答える 3

4

あなたの例では、イベントはバインディングの瞬間に存在するコントロールにバインドされ、セレクターと一致します。新しく作成されたコントロールにアクションを適用する場合は、イベントをdocumentそれ自体にバインドする必要があります。これは最上位の DOM 要素であるため、下位レベルからのすべてのイベントがそこまで伝搬されます。

2 番目のパラメーターでコンテキストを指定すると、そのコンテキストからイベントを受け取った場合にのみ関数が起動します。

$(document).on('dblclick', '.todo', function () {
    $(this).find('a.edit').click();
});

コード全体は引用しませんが、このコードからアイデアを得ることができます。

リスナーをドキュメントにバインドすることをお勧めします。これは、多くのコントロールほど多くのバインディングを作成せず、イベントが DOM ツリーに伝播するのを待つ最上位のバインディングを 1 つだけ作成するためです。最適化の詳細: http://24ways.org/2011/your-jquery-now-with-less-suck/

于 2013-04-19T22:04:32.503 に答える
0

使用する

$('.todo').on('click', '.cancel', function () {
    alert("oops");
});

そのため、イベントを既存の要素 ( the.todo )にデリゲートします。

それ以外の

$('.cancel').on('click', function () {
    alert("oops");
});
于 2013-04-19T22:09:59.700 に答える
0

2つの方法

2 番目のケースでは、イベント委譲を最も近い親にバインドするので、イベントは実行されるドキュメント要素にバブリングする必要はありません。これにより、一部のパフォーマンスが向上する可能性があります。キャンセルボタンを別の場所に配置するかどうかは用途によって異なります。

編集：各liには異なるIDがあるため、クラスにアタッチすることをお勧めします.todo

$('.todo').on('click', 'a.cancel', function () { alert("oops"); });

于 2013-04-19T22:17:15.110 に答える