2

特定の jQuery プラグインを呼び出すハンドラーがたくさんあります。コードをリファクタリングし、プラグインを呼び出すラッパーにプロパティとメソッドを渡すことができるオブジェクトを作成したいと思います。

問題: 次のステートメントをエミュレートするのが困難です。

    $("li", opts.tgt).live("click", function () { GetContact(this); });

続行する方法について誰か提案がありますか？ティア。

function InitAutoCompleteTest() { // Init custom autocomplete search
    var opts = {
        tgt: "#lstSug", crit: "#selCrit", prfxID: "sg_", urlSrv: gSvcUrl + "SrchForContact",
        fnTest: function (str) { alert(str) }, 
        fnGetData: function (el) { GetContact(el) } 
    }

    $("input", "#divSrchContact").bind({
        "keypress": function (e) { // Block CR (keypress fires before keyup.)
            if (e.keyCode == 13) { e.preventDefault(); }; 
        },
        "keyup": function (e) { // Add suggestion list matching search pattern.               
            opts.el = this; $(this).msautocomplete(opts); e.preventDefault();
        },
        "dblclick": function (e) { // Clear search pattern.
            $(this).val("");
        }
    });

    opts.fnTest("Test"); // Works. Substituting the object method as shown works.


    // Emulation attempts of below statement with object method fail:
    // $("li", opts.tgt).live("click", function () { GetContact(this); });   

    $("li", opts.tgt).live({ "click": opts.fnGetData(this) }); // Hangs.
    $("li", opts.tgt).live({ "click": opts.fnGetData });  // Calls up GetContact(el) but el.id in GetContact(el) is undefined
}

function GetContact(el) {
    // Fired by clicking on #lstSug li. Extract from selected li and call web srv.
    if (!el) { return };

    var contID = el.id, info = $(el).text();
    ...
    return false;
}

編集

フィードバックをお寄せいただきありがとうございます。最終的に、Thiefmaster によって提案されたバリアントを使用しました。"opts.fnTest("Test");" いわば、箱から出してすぐに動作します。

    $("li", opts.tgt).live({ "click": function () { opts.fnGetData(this); } });
4

2 に答える 2

5

それらを無名関数でラップするだけです。

function() {
    opts.fnGetData();
}

最新の JS エンジンを必要とする別のオプションは、次を使用すること.bind()です。

opts.fnGetData.bind(opts)

完全な例:

$("li", opts.tgt).live({ "click": opts.fnGetData.bind(opts) });
$("li", opts.tgt).live({ "click": function() { opts.fnGetData(); }});

コールバック内でthis、オブジェクトにアクセスするために使用します。

要素を引数として渡したい場合は、次のようにできます。

$("li", opts.tgt).live({ "click": function() { opts.fnGetData(this); }});
于 2012-09-30T15:52:16.567 に答える
1

ドキュメントから

.live( events, data, handler(eventObject) )

events「クリック」や「キーダウン」などの JavaScript イベント タイプを含む文字列。jQuery 1.4 の時点で、文字列にはスペースで区切られた複数のイベント タイプまたはカスタム イベント名を含めることができます。

dataイベント ハンドラーに渡されるデータのマップ。

handler(eventObject)イベントがトリガーされたときに実行する関数。

例：

$('#id').live('click', {"myValue":"someValue"}, function(evt){
    console.log(evt.data["myValue"]); // someValue
});​

JQuery ライブ

于 2012-09-30T16:08:12.803 に答える