jQuery 플러그인이 이미 DOM 노드에 바인딩되어 있는지 확인하는 방법은 무엇입니까?

Question

대부분의 jQuery 플러그인은 처음 초기화 할 때 DOM 노드에 연결되거나 바인딩됩니다.

$('#foo').bar({options: ...}); 

당신이 플러그인이나 객체가 현재 #foo 같은 DOM 노드에 바인딩 된 것을 확인할 수 있습니다 방법

? 예를 들어

if($('#foo').bar) 
if($.inArray('bar', $('#foo').eq(0))) 
if($('#foo').eq(0).indexOf('bar')) 
if($('#foo').hasOwnProperty('bar')) 

, 그것은 플러그인 자체가에 일하고 요소 (들)을 변경하는 몇 가지 방법을 정의되지 않는 한이

console.log($('#foo').data('events')); 

Answer 1

같은 개체에 바인딩 이벤트를 얻을 수, 그것은 불가능 해요 . 예를 들어 :

여기

$.fn.extend({ 
    foo: function() { console.log("I am foo!"); } 
}); 

$('#bar').foo(); 

나는 심지어 호출 요소와 상호 작용하지 않는 완전한 (잘, 더 - 오 - 이하) jQuery 플러그인을 정의했다.

jQuery.fn = jQuery.prototype = { ... } 

: 당신이 원하는대로 그럼에도 불구하고, 당신은 ( jquery.js에서) 때문에이 라인의 프로토 타입에서이 방법을 가지고 요소의 jQuery를 감싸 컬렉션으로, 요소의 jQuery를 감싸 컬렉션, 사용할 수 있습니다

... $.fn.extend이 플러그인을 호출하기 위해 호출 된 후 아무런 의도도 없습니다.

하지만 내 플러그인과 같이, 어떤 방법으로 그 호출 요소를 변경하는 데 필요한 경우에도 :

$.fn.extend({ 
    bar: function() { this.html('I am all bar now!'); } 
}); 
$('#bar').bar(); 

... 난 아직도, 기본적으로 일부 외부 이벤트와이를 처리해야합니다 (DOM 돌연변이 내부 jQuery 로깅에 의존하는 것이 아닙니다.

Answer 2

제 경우에는 감지하려고하는 플러그인이 어떤 데이터를 $(element).data() 저장소에 추가하는 경우가 발생합니다. 나는 또한 플러그인이 클래스 나 ID의 이름을 추가하거나 클래스의 이름을 변경 한 것을 본 적이있다.

아래는 현재이 문제를 해결하기 위해 노력하고있는 코드입니다. 아마도 대부분의 플러그인에서 작동하지 않을 수 있습니다.

$.fn.extend({ 
    isPluginBound: function(pluginName) 
    { 
     if(jQuery().pluginName) 
     { 
      var name = pluginName.toLowerCase(); 

      return this.data(pluginName) || this.data(name) 
       || this.attr('class').toLowerCase().indexOf(name) !== -1 // vs hasClass() 
       || this.attr('id').toLowerCase().indexOf(name) !== -1; 
     } 
    } 
}); 

는 그냥 지금까지 내가 모든 jQuery를 위젯들이 DOM 노드에 자신의 인스턴스를 추가 알고 $('#foo').isPluginBound('bar');

Answer 3

전화를 사용합니다. 내 프로젝트에서 다음 확장명을 사용 중입니다.

// returns first found widget instance of the first element or calls method on first widget instance of all elements 
$.fn.widget = function (method , option, value) { 
    var wi; 
    // iterate all elements 
    this.each(function() { 
    var wii; 
    // iterate all attached data elements, look for widget instances 
    $.each($(this).data(), function(key, data){ 
     if ("widgetName" in data){ wii = data; return false } 
    }) 
    // if there is a widget instance but no method specified 
    if (wii && !method) { 
     wi = wii; 
     return false 
    } 
    // if there is a widget and there is an object found with the method as the key 
    else if (wii && (method in wii)) { 
     // if it is truly a method of that instance, call that instance 
     if ($.isFunction(wii[method])) { 
     wi = wii[method].call(wii, option, value) 
     } 
     // else, it is maybe a value stored in the instance you seek? 
     else { 
     wi = wii[method] 
     } 
    } 
    }) 
    return (wi === undefined) ? this : wi ; 
}