2012-08-31 4 views
1

jQuery 플러그인을 구축 중입니다. 나는 그것이를 쓸 수는 CONSOLE.LOG 오류를 표시 할 위를 사용했다jQuery 플러그인 AJAX 성공 내에서 사용할 요소 ID 가져 오기

(function($){ 
    $.fn.jQueryPlugin= function(options) { 

     var 
      defaults = { 
      user: '' 
      } 

      var options = $.extend(defaults, options); 
      var o = options; 

      $.ajax({ 
       type: "get", 
       url: "http://api.domain.com/user/"+o.user, 
       data: "", 
       dataType: "jsonp", 
       success: function(data){ 
        var p = data; 
        console.log(p.location); 
        $(this).html(p.location); 
       } 
      }); 

      // returns the jQuery object to allow for chainability. 
      return this; 
    } 
})(jQuery); 

경우

$('#box').jQueryPlugin({user:'user123'}); 

jQuery 플러그인 플러그인을 호출

p.location in div = "box"

어떻게 할 수 있을까요? 플러그인을 호출 할 때 지정된 div에 쓰기?

+0

'this'는 성공 호출의 HTML 요소에 매핑되지 않습니다. '데이터'는 무엇을 반환해야합니까? 코드의 목적은 무엇입니까? – MalSu

+0

올바른 도메인 등이있을 때 코드가 제대로 작동합니다. 내 유일한 문제는 플러그인을 호출 할 때 사용되는 선택기에 p.location의 값을 쓰는 방법입니다. – ngplayground

+0

'p = data'라고 말하면 '데이터'는 무엇입니까? 내가 말했듯이,'console.log ($ this)'를 실행하고 왜'$ (this) .html'이 DOM상의 어떤 것에도 매핑되지 않는지를보십시오. 'data'가 요소의 id를 반환한다고 가정하면, 선택을 잘못하고있는 것입니다. – MalSu

답변

4

this 당신은 당신이 나중에 사용할 수 있도록 VAR에 div를 할당 할 필요가 그래서 .. 당신이 success 콜백에서 기대하는 상황이되지 않습니다

(function($){ 
    $.fn.jQueryPlugin= function(options) { 

     var 
      defaults = { 
      user: '' 
      } 

      var options = $.extend(defaults, options); 
      var o = options; 

      var $div = $(this); 

      $.ajax({ 
       type: "get", 
       url: "http://api.domain.com/user/"+o.user, 
       data: "", 
       dataType: "jsonp", 
       success: function(data){ 
        var p = data; 
        console.log(p.location); 
        $div.html(p.location); // now we have the original div; 
       } 
      }); 

      // returns the jQuery object to allow for chainability. 
      return this; 
    } 
})(jQuery); 

또 다른 방법은 설정하는 것 $.ajax 전화의 context 옵션은 see the context option in the jQuery docs입니다.

관련 문제