如何在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事件處理程序中傳遞對象方法？

回答

相關問題