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

我有一堆处理程序调用特定的jQuery插件。我想重构代码并创建一个对象，其属性和方法可以传递给一个包装器，然后调用插件。如何在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); } });

来源

2012-09-30 user1660874

简单地将它们包装在一个匿名函数：

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-30 15:52:16 ThiefMaster

谢谢，我张贴您的解决方案在我的组织后结束。 – user1660874

请不要 - 这并不真正适合Stack Overflow的问答风格。但是，* * *表示您*接受*此答案，而不是通过单击投票箭头下方左侧的灰色复选标记项。 – ThiefMaster

从技术文档

.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 
});

JQuery live

来源

2012-09-30 16:08:12

'。live（）'已被弃用于所有版本的jQuery。在1.7之前版本的jQuery中，应该使用'.delegate（）'和1.7+，应该使用'.on（）'。 – jfriend00

谢谢你））我会记住）） –

@安顿Baksheiev。谢谢，很高兴知道。我发现由Thiefmaster提出的解决方案更加灵活，所以我添加到了我的组织职位。 – user1660874

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

回答

相关问题