0

これは非常に単純に思えますが、何らかの理由で期待どおりに動作しません。

キーでトリガーを必要とするときにコード行を単純に減らすことができる非常に単純なjQuery拡張機能/プラグインを作成しようとしていenterます(および同様のものescape)

これが私のコードです：

$.fn.enterListen = function (callBack) {
    $(this).on('keyup', function (e) {
        if (e.keyCode == 13) {
            callBack;
            // $(this).enterListen(callBack); // trying to rebind...
        };
    })
};

次に、要素が jquery で動的に作成されると、次のようになります。

var input = $('<input'>).enterListen(function (){ alert("Enter was pressed"); });
$(input).appendTo('body');

これで、ページに入力要素が追加されました。この要素に入力すると、enterそれが押されるとアラートがトリガーされます。

これは、一度だけを除いて機能します。

上記のコードで、トリガーがアクティブ化された後に関数を要素に再バインドしようとしているコメント アウトされた行を確認できますが、enterそれでも 2 回目は機能しません。

を押す前に好きなだけ他のキーを押すことができますが、押すEnterとすぐにkeyupイベントのバインドが解除されるようです。

IF ... ただし、次のように実行します。

function isEnter(e, ele) {
    if ((e * 1) == 13) {
        $(ele).click();
    };
};

呼び出し元:

var input = $('<input'>).on('keyup', function (e) { isEnter(e.keyCode, $(ok)) });
$(input).appendTo('body');

それは正常に動作しますが、コードが不器用です。このプロジェクトの内部コーディングを少し短くするために、拡張機能のライブラリを作成しようとしています...おそらく、必要なものに時間を費やしすぎているだけです.た...

とにかく、イベントがバインドされなくなった理由を誰かが明らかにできれば、それは素晴らしいことです!

4

1 に答える 1

1

jQueryプラグインの中にthisはjQueryオブジェクトがあり、それを再ラップする必要はありません。e.whichjQueryで正規化されます。関数を実行するには、括弧が必要です()。そして最も重要なことは、返す必要があります。thisそうしないと、input変数が未定義になります。複数の要素を含むセレクターを使用してプラグイン内で何かを行う場合は、jQueryのプラグイン作成this.each(function() { ... })ドキュメントで説明されているように返す必要があります。

$.fn.enterListen = function (callBack) {
    return this.each(function() {
        $(this).on('keyup', function (e) {
            if (e.which == 13) {
                e.preventDefault();
                callBack();
            }
        });
    });
};

var input = $('<input />').enterListen(function (){ 
    alert("Enter was pressed"); 
});

input.appendTo('body');

フィドル

于 2013-01-27T11:11:29.980 に答える