2013-09-14 2 views
1

Я пытаюсь создать модуль JavaScript, чтобы лучше понять шаблон. Я пытаюсь прикрепить события click к кнопке с addEventListener и attachEvent, но я не могу получить свой console.log для регистрации.attachEvent не является функцией - с использованием шаблона модуля

Я также получаю сообщение об ошибке: «Ошибка типа: element.attachEvent не является функцией»

Вот скрипку, что у меня есть на данный момент: http://jsfiddle.net/rL5xp/

Вот в HTML:

<p>The color is <span class="js-print">green</span>.</p> 
<button class="js-button">Click Here</button> 

Вот JavaScript:

var settings = [ 
    {color : 'green'}, 
    {color : 'blue'}, 
    {color : 'red'} 
]; 

var $ele = { 
    span : $('.js-print'), 
    button : $('.js-button') 
}; 

var ChangeColor = (function(s, $element) { 

    var init = function() { 
    bindBrowserActions(); 
    } 

    var bindBrowserActions = function() {   
    addClick($element.button, 'click', function() { 
     console.log('click'); 
    });   
    } 

    var addClick = function(element, evnt, funct) { 
    if (element.addEventListener) { 
     return element.addEventListener(evnt, funct, false); 
    } 
    //addEventListener is not supported in <= IE8 
    else { 
     return element.attachEvent('on'+evnt, funct); 
    } 
    } 

    return { 
    init : init 
    } 

})(settings, $ele); 

(function() { 
    ChangeColor.init(); 
})(); 

ответ

3

В методе addClick аргумент element был передан как элемент оболочки jQuery, а не ссылка элемента dom, поэтому он не имеет методов, таких как addEventListener или attachEvent.

С element является элементом оболочки jQuery, вы можете использовать .on() для регистрации обработчиков событий.

var addClick = function(element, evnt, funct) { 
    element.on(evnt, funct) 
} 

Демо: Fiddle

+0

Спасибо! Это работало в прошлом, когда я использовал идентификаторы элементов и document.getElementById. Благодарим вас за отличное объяснение. – Mdd

Смежные вопросы