2

jQuery Webサイトで言及されているため、.live()メソッドは推奨されなくなりました。
イベントを使おうとしていたの.on()ですが、期待通りに動作しません。.live次のシナリオで使用しても問題はありません。

オートコンプリートプラグインを使用するフィールドがあります。

つまり、エントリを入力しようとするたびに、このようなフィールド(プラグインによって生成された)に入力します。つまり、最初のエントリを入力して完了が完了すると、2回目に入力します。入力、同じクラスの別の新しいフィールドが作成されます。

<li id="select">
    <input type="text" autocomplete="off" size="0" class="input">
</li> 

私がやろうとしているのは、貼り付けハンドラーを生成して、何かを貼り付けるたびに入力になるようにすることです。これは、独自のタグ(とにかく現在の問題とは関係ありません)を持つエントリになります。.liveイベントを使用すると、期待どおりに機能します。初めてのペーストだけでなく、将来のペーストにも対応します。しかし、ライブではなく.onに変更すると、最初の貼り付けでのみ機能します。以下は私のコードです:

$(document).ready(function () {
    $(".input").live('paste', function (event) {
        var element = this;
        setTimeout(function () {
            var text = $(element).val();
            addItem(text);
        }, 10);
    });
});

なぜこれが起こっているのか誰か説明できますか?

4

3 に答える 3

3

このように(プラグインによって生成された)フィールドに入力すると、最初のエントリを入力して完了が完了し、2回目に入力を入力すると、同じクラスの別の新しいフィールドが作成されます。

それは動的な要素のように聞こえます。live()を使用すると、そのイベントがにバブルされ、要素で発生したdocumentときに再アクションされます。paste.input

on()これを次のような単純なものに置き換えると、それ$(".input").on('paste', function (event) {}は複製されません。

これは単純なバインドにすぎず、要素が動的に置き換え/再追加されるとすぐに、要素が再追加されたとしても、要素が削除されるとすぐにバインドされたイベントはなくなります。

動的要素を複製するには、委任とともにlive()使用する必要がありますon()。これにより、イベントを最も近い静的要素にバインドし、委任先の要素/セレクターを指定できます。

live()現在の場所を次の場所から変更します。

$(document).ready(function () {
    $(".input").live('paste', function (event) {
        var element = this;
        setTimeout(function () {
            var text = $(element).val();
            addItem(text);
        }, 10);
    });
});

on()これに似た委任で使用するには:

$(document).ready(function () {
    $(document).on("paste", ".input", function (event) {
        var element = this;
        setTimeout(function () {
            var text = $(element).val();
            addItem(text);
        }, 10);
    });
});

上記では、イベントはにバインドされていますが、上の要素にdocument委任されています。.inputpaste

代わりにdocument、最も近い静的な親要素にバインドする必要があります。たとえば、bodyまたはこれに似た、より近い静的な親:

$('body').on("paste", ".input", function (event) {...}

.input要素の最も近い静的な親がどれであるdocumentかは、bodyコース外でも問題なく機能します。

于 2013-03-27T00:23:23.183 に答える
1

使用する

function addItem(text){
    console.log('Add', text)
}

$(document).ready(function(){
    $('body').on('paste', ".input", function (event) {
        var element = this;
        setTimeout(function () {
            var text = $(element).val();
            addItem(text);
        }, 10);
    });
});

デモ:フィドル

于 2013-03-27T00:24:09.577 に答える
0

イベントは1回だけトリガーされるようですが、これは次のことに関連している可能性があります。

  • usingと呼ばれるイベント.oneではなく.on
  • イベントターゲットがそのdomによって変更されている(削除または移動されている)ため、イベントが失われます。

私は本当に.live翻訳に行くことをお勧めします:

$(document).on('paste', ".input", function (event) {
    var element = this;
    setTimeout(function () {
        var text = $(element).val();
        addItem(text);
    }, 10);
});

ドキュメント内のイベントをリッスンすると.input、新しいイベントが追加されるたびにそのイベントが2番目のパラメーター()に追加されるため、readyイベントをスキップできます。

于 2013-03-27T00:27:02.130 に答える