2013-03-23 3 views
0

내 플러그인에서 다른 함수에 이벤트를 통과해야 Constructor Itoggle에서 mouseInOut까지이며 Itoggle.prototype.mouseInOut 안에 options이 표시됩니다. 코드는 어떤 인수를 mouseInOut에 전달하려고 시도하기 전에 정상적으로 작동하지만 이제는 event을 더 이상 얻을 수 없습니다. 심지어 인수로 event을 전달하려고해도 인수 나 인수가 사용됩니다.나는 몇 가지 문제는 내가 이벤트를 얻을 때, 내가 가진

오류 :

Uncaught TypeError: Cannot read property 'type' of undefined makeup-itoggle.js:18 Itoggle.mouseInOut makeup-itoggle.js:18
b.event.special.(anonymous function).handle
b.event.dispatch
v.handle


;(function ($) { 

    "use strict"; 

    var Itoggle = function (el, options) { 
    $(el).on('mouseenter mouseleave', mouseInOut(event, options); 
    }; 

    Itoggle.prototype.mouseInOut = function (event, options) { 
    var $this = $(this) 
     , selector = $this.attr('data-target') 
     , target = $('#' + selector); 

    var opt = $.extend({}, $.fn.itoggle.defaults, options); 
    console.log(opt.titleActive); // ok 

    if (event.type == 'mouseover') {//here's come the error. Cannot read property 'type' of undefined 
     $this.addClass(opt.elementActive); 
     $this.find('.nav-button-title').addClass(opt.titleActive); 
     target.show(); 
    } 
    else if (event.type == 'mouseout') { 
     $this.removeClass(opt.elementActive); 
     $this.find('.nav-button-title').removeClass(opt.titleActive); 
     target.hide(); 

     target.mouseenter(function() { 
     $this.addClass(opt.elementActive); 
     $this.find('.nav-button-title').addClass(opt.titleActive); 
     target.show(); 
     }); 

     target.mouseleave(function() { 
     $this.removeClass(opt.elementActive); 
     $this.find('.nav-button-title').removeClass(opt.titleActive); 
     target.hide(); 
     }); 

    } 
    else { console.log('invalid event'); } 



}; 

/* ITOGGLE PLUGIN DEFINITION 
    * ========================= */ 

    $.fn.itoggle = function() { 
    return this.each(function() { 
     var $this = $(this) 
     , data = $this.data('itoggle') 
     , options = typeof option == 'object' && option; 
     if (!data) { $this.data('itoggle', (data = new Itoggle(this, options)));} 
    }); 
    }; 

    $.fn.itoggle.defaults = { 
    elementActive: 'nav-outer-button-active', 
    titleActive: 'nav-button-title-active' 
    }; 

    $.fn.itoggle.Constructor = Itoggle; 


})(window.jQuery); 
+0

실제 사건 처리기에'event'를 전달해야합니다 ... – elclanrs

+0

@elclanrs 나는 이것도 될 수 있다고 생각했지만, 이렇게하면 같은 오류가 발생합니다. – cSv

답변

0

당신은 기능을 대신 함수 결과를 전달합니다

// wrong, function executes immediately, 
// event is undefined atm, so it throws an error 
$(el).on('mouseenter mouseleave', mouseInOut(event, options)); 

// correct way? 
$(el).on('mouseenter mouseleave', mouseInOut); 

내가 작품을 놀랍군요하지만. 일반적으로 다음과 같은 함수를 전달해야합니다.

하지만 실제로 작동하는 경우 - 틀렸어.

실행 컨텍스트는 Itoggle이 아닌 이벤트를 트리거 한 HTMLElement입니다.

+0

@monshq는 모두 옳다고 말했습니다. 핸들러가 어떻게 호출되는지를 변경했습니다 : '$ (el) .on ('mouseenter mouseleave', this.mouseInOut); ' 오류가 중지되었습니다. 하지만 내 주요 질문은'Itoggle.prototype.mouseInOut' 개체에'options' 개체를 전달할 수 있다는 것입니다. ?? – cSv

+0

그렇게 할 방법이 없습니다. JQuery는'.on()'함수에서 하나의 이벤트 핸들러 매개 변수만을 허용합니다. 이'.on()'함수를 패치하거나 프로토 타입'Itoggle.prototype.options'에서 옵션을 설정해야합니다. – monshq

관련 문제