Uncaught ReferenceError. Прототип функции не найден внутри обработчика событий JQuery

Я получаю следующее сообщение об ошибке при нажатии кнопки передачи:Uncaught ReferenceError. Прототип функции не найден внутри обработчика событий JQuery

Uncaught ReferenceError: addText is not defined

Как получилось «нажмите кнопку» Функция обработки не может найти функцию класса прототип ' добавить текст'?
Что я могу сделать, чтобы исправить это?
Если это плохой способ обработки событий? (Я родом из Java фоне, и я немного не уверены в лучших практик с объектно-ориентированным JavaScript)

Вот код:

<head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="js/jquery-1.9.1.js"></script> 
    <script> 
     //Class ctor 
     function MyClass() { 
      this.msg = "Hello World!"; 
     } 
     //This method appends text to the given doc element 
     MyClass.prototype.addText = function(doc) { 
      $(doc).append('<br/>'+this.msg); 
     }; 
     /* 
     * This method adds a 'click' listener to the given element which 
     * calls the 'addText' method on its parent. 
     */ 
     MyClass.prototype.listenToButton = function(btn) { 
      $(btn).bind({ 
       click: function(event) { 
        addText($(this).parent()); 
       } 
      }); 
     }; 

     $(document).ready(function() { 
      //Create instance of class 
      var c = new MyClass(); 
      //Listen to button 
      c.listenToButton($("#mybutton")); 
     }); 
    </script> 
</head> 
<body> 
    <div>Button: <input id="mybutton" type="button" value="Submit"></div> 
</body>

Очевидно, я использую JQuery. Заранее спасибо!

EDIT

Вот что я узнал:

«Нажмите» функцию обработки не может найти функцию «AddText», потому что «это» больше не ссылается на экземпляр класса, но отправителя события.
Чтобы обойти это, я должен сохранить текущую область «this» в переменной вне функции обработчика.
Я не уверен, что обработка событий таким образом является плохой практикой или нет, но она работает, поэтому я собираюсь с ней.
Кроме того, я должен использовать 'on' вместо 'bind', так как это похоже на 'bind' calls 'on' в любом случае.

Спасибо всем за ваши быстрые ответы!

источник

2013-04-23 souldzin

Вы должны использовать 'on' вместо' bind'. И вам нужно узнать о масштабах этого. – epascarello

В основном, внутри события click контекст ('this') больше не является экземпляром MyClass, это элемент, который был * нажат *, поэтому addText не определен. –

@epascarello ok, в чем разница? – souldzin

Попробуйте это:

MyClass.prototype.listenToButton = function(btn) { 
     var that = this; 
     $(btn).bind({ 
      click: function(event) { 
       that.addText($(this).parent()); 
      } 
     }); 
    };

источник

2013-04-23 15:26:22 vher2

Это прекрасно работает. Спасибо за быстрый ответ! Это то, как эти ситуации должны быть обработаны или это признак плохого дизайна? – souldzin

@SoulDZIN Это типичное решение проблемы, еще один вариант - передать 'this' в функцию с помощью iife или управлять контекстом с помощью' Function.bind' или 'jQuery.proxy'. Определение 'that' var является обычным способом его обработки. –

@ Kevin B Хорошо, это приятно знать, спасибо! – souldzin

Uncaught ReferenceError. Прототип функции не найден внутри обработчика событий JQuery

ответ

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