jquery 이벤트 핸들러에서 오브젝트 메소드를 전달하는 방법은 무엇입니까?

Question

특정 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가 제안한 변형을 사용했습니다. "opts.fnTest ("Test "); 이후 익명 fn 내에서 메소드를 임베드해야하는 이유가 궁금합니다." 상자에서 곧바로 작동하므로 말할 수 있습니다.

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

Answer 1

간단하게 익명 함수에서 그들을 포장 :

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

Answer 2

문서에서

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

eventsA에게 자바 스크립트를 포함 문자열을 이벤트 유형 (예 : '클릭'또는 'keydown') jQuery 1.4부터 문자열에는 공백으로 구분 된 여러 이벤트 유형 또는 사용자 정의 이벤트 이름이 포함될 수 있습니다.

데이터 이벤트 처리기로 전달되는 데이터 맵.

처리기 (eventObject) 이벤트가 트리거 될 때 실행할 기능입니다.

예 :

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

JQuery live