2

我有一堆调用特定 jQuery 插件的处理程序。我想重构代码并创建一个对象，其属性和方法可以传递给包装器，然后调用插件。

问题：我难以模拟以下语句：

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

有人对如何进行有一些建议吗？TIA。

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 提出的变体。我只是想知道为什么该方法必须嵌入匿名 fn 中，因为 "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 事件类型的字符串，例如“click”或“keydown”。从 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 回答