1

次のように、クラスにアタッチされたイベントハンドラーがあります。

$('#container').on('click', '.myClass', function (e) {...

このハンドラー内で、クリックされた要素に別のクリック ハンドラーをアタッチしたいと考えています。一時ハンドラーがクリックされたら、元のハンドラーを再度有効にしたいと考えています。

私がやろうとしているのは (このフィドルに示されているように)、テキストのセクションをクリックできるようにし、それを入力テキスト ボックスに変更してから、変更を送信してテキストを再作成することです。

フィドルで見つかったように、成功せずに次のことを試しました：

$('#container').on('click', '.submit', function (e) {
    var $this = $(this),
        new_text = $this.prev().val();
    e.stopPropagation();
    $this.parent().off('click.temp').html(new_text);                    
});

$('#container').on('click', '.test', function (e) {
    var $this = $(this);
    $this.html("<input type='text' value='" + $this.text() + "'/><input class='submit' value='Submit' type='submit'>");
    $this.on('click.temp', function (e) {
        e.stopPropagation();
    });
});

を使用し.off()ても、要素ではなくクラスにアタッチされているため、クラスの元のハンドラーがキャンセルされないようです。

で質問に部分的に答えたと思いますが、e.stopPropagation()まだうまく機能しておらず、これが最善の方法であると確信していません:)

注:この投稿はアイデアに関連していますが、使用していませんthis。

4

3 に答える 3

2

次のように簡単に実行できます。

function testClick() {

    var $this = $(this),
        text = $this.text();

    // you have to off the click like this
    $('#container').off('click', '.test');
    
    $this.html(
        "<input class='text' type='text' value='" + text + "'/><input class='submit' value='Submit' type='submit'>"
    );

    $this.find('.submit').on('click', function(e) {
        e.stopPropagation();
        var new_text = $this.find('input.text').val();
        $this.html(new_text);
        $('#container').on('click', '.test', testClick); // again on click
    });
}

$('#container').on('click', '.test', testClick);

作業サンプル

次のように送信イベントを分離できます。

function testClick() {

    var $this = $(this),
        text = $this.text();

    // you have to off the click like this
    $('#container').off('click', '.test');

    $this.html("<input class='text' type='text' value='" + text + "'/><input class='submit' value='Submit' type='submit'>");
}

$('#container').on('click', '.submit', function(e) {
    e.stopPropagation();
    var new_text = $(this).prev('input.text').val();
    $(this).parent().html(new_text);
    $('#container').on('click', '.test', testClick); // again on click
});

$('#container').on('click', '.test', testClick);

作業サンプル

于 2012-07-12T05:15:26.627 に答える
1

その場で入力のハンドラーを追加および削除するのではなく、入力を作成するクリック ハンドラーで既に行っているように、委任されたイベント ハンドラーを使用します。

$('#container').on('click', '.test', function (e) {
    var $this = $(this);
    $this.removeClass("test")
         .html("<input type='text' value='" + $this.text() + "'/><input id='me' value='Submit' type='button'>");
});

$('#container').on('click', 'input[type="button"]', function (e) {
    var $this = $(this),
        new_text = $this.prev().val();
    $this.parent().addClass("test")
                  .html(new_text);
});

'.test' div をクリックすると、その内容を入力と同じように置き換えますが、「test」クラスも削除して、div をさらにクリックしても (当面は) 何も実行されないようにします。

送信ボタンをクリックすると、テキストのみを表示するように div を変更し、クラスを再度追加して、前のクリック ハンドラーが再び有効になるようにします。

注: ボタンを からtype="submit"に変更しましtype="button"た。これは、実際にはフォームの送信に使用されないためです。

デモ: http://jsfiddle.net/4vmQ4/5/

于 2012-07-12T05:29:24.497 に答える
1

イベントが同じ方法でオン/オフされるように、基本的にコードを再構築しました。

更新されたデモ: http://jsfiddle.net/qZVzY/6/

更新されたコード

onClickReadMode- 読み取りモードで div がクリックされたときのイベント ハンドラーです。

onClickEditMode- 編集モードで div がクリックされたときのイベント ハンドラーです。

function onClickReadMode(_elem) {
    console.log('onClickReadMode');
    var $this = _elem, text = $this.text();
    $this.html("<input class='text' type='text' value='" + text + "'/><input class='.submit' value='Submit' type='submit'>");
    _elem.off('click.before');
    _elem.on('click.after', function() {
        onClickEditMode($(this));
    });
    _elem.find('.text').on('click.stopevent', function(e) {
        e.stopPropagation();
        return false;
    });
}

function onClickEditMode(_elem) {
    console.log('onClickEditMode');
    var $this = _elem;
    var new_text = $this.find('input').val();
    $this.html(new_text);
    _elem.off('click.after');
    _elem.on('click.before', function() {
        onClickReadMode($(this));
    });
}

$('.test').on('click.before', function (e) {
    onClickReadMode($(this));
});
于 2012-07-12T05:04:34.677 に答える