Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/google-apps-script/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在jquery事件处理程序中传递对象方法?_Jquery - Fatal编程技术网

如何在jquery事件处理程序中传递对象方法?

如何在jquery事件处理程序中传递对象方法?,jquery,Jquery,我有一堆处理程序调用特定的jQuery插件。我想重构代码并创建一个对象,该对象的属性和方法可以传递给包装器,然后包装器将调用插件 问题:我很难模仿以下陈述: $("li", opts.tgt).live("click", function () { GetContact(this); }); 有人对如何进行有什么建议吗?蒂亚 function InitAutoCompleteTest() { // Init custom autocomplete search var op

我有一堆处理程序调用特定的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提出的变体。我只是想知道为什么该方法必须嵌入到匿名fn中,因为“opts.fnTest(“Test”);”可以说是开箱即用的

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

只需将它们包装在匿名函数中:

function() {
    opts.fnGetData();
}
另一个需要现代JS引擎的选项是使用
.bind()

完整示例:

$("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); }});
从文件

.live( events, data, handler(eventObject) )
eventsA包含JavaScript事件类型的字符串,如“click”或“keydown”。从jQuery 1.4开始,该字符串可以包含多个以空格分隔的事件类型或自定义事件名称

数据将传递给事件处理程序的数据映射

处理程序(eventObject)触发事件时要执行的函数

例如:

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

.live()
已被所有版本的jQuery弃用。在jQuery 1.7之前的版本中,应该使用
.delegate()
,对于1.7+,应该使用
.on()
@Anton Baksheiev。谢谢,很高兴知道。我发现Thiefmaster提出的解决方案更简洁,所以我将其添加到了我的组织帖子中。谢谢,我在组织帖子的末尾发布了你的解决方案。请不要这样做-这不符合Q&A风格的堆栈溢出。但是,您可以通过单击投票箭头下方左侧的灰色复选标记项来接受此答案。
$('#id').live('click', {"myValue":"someValue"}, function(evt){
    console.log(evt.data["myValue"]); // someValue
});​