Javascript 未捕获的引用错误。在jQuery事件处理程序中找不到原型函数_Javascript_Jquery_Html

Javascript 未捕获的引用错误。在jQuery事件处理程序中找不到原型函数

javascript jquery html

Javascript 未捕获的引用错误。在jQuery事件处理程序中找不到原型函数,javascript,jquery,html,Javascript,Jquery,Html,当我按下提交按钮时，出现以下错误： Uncaught ReferenceError: addText is not defined 为什么“click”处理函数找不到类原型函数“addText” 我能做些什么来解决这个问题如果这是一种糟糕的事件处理方式？（我来自java背景，我有点不确定面向对象javascript的最佳实践）代码如下： <head> <title></title> <meta http-equiv="Cont

当我按下提交按钮时，出现以下错误：

Uncaught ReferenceError: addText is not defined

为什么“click”处理函数找不到类原型函数“addText”
我能做些什么来解决这个问题
如果这是一种糟糕的事件处理方式？（我来自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>


//班主任
函数MyClass（）{
this.msg=“你好，世界！”；
}
//此方法将文本附加到给定的doc元素
MyClass.prototype.addText=函数（doc）{
$（doc.append（“
”+this.msg）；
};
/*
*此方法向给定元素添加“单击”侦听器，该元素
*调用其父级上的“addText”方法。
*/
MyClass.prototype.listenToButton=函数（btn）{
$（btn）.bind({
单击：功能（事件）{
addText（$（this.parent（））；
}
});
};
$（文档）.ready（函数（）{
//创建类的实例
var c=新的MyClass（）；
//听按钮
c、 listenToButton（$（“#我的按钮”）；
});
按钮：

显然，我正在使用jQuery。提前谢谢

编辑

以下是我学到的：

“click”处理函数找不到函数“addText”，因为“this”不再引用类实例，而是引用事件的发送方
为了解决这个问题，我应该将当前的“this”范围保存在处理函数外部的变量中
我不确定以这种方式处理事件是否是一种不好的做法，但它是有效的，所以我同意它
此外，我应该使用“on”而不是“bind”，因为“bind”似乎调用了“on”

谢谢大家的快速回复

试试这个：

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

试试这个：

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

您应该在上使用

，而不是绑定
。您需要了解此
的范围。基本上，在单击事件中，上下文（此
）不再是MyClass的实例，而是被单击的元素，因此没有定义addText。@epascarello ok，有什么区别？@Kevin B所以Javascript匿名函数不同于Java匿名函数，在Java匿名函数中，Javascript无法找到当前嵌套级别之外的函数？@SoulDZIN不，它可以，只是与您定义它的方式不同。通常，在调用实例的方法时，您希望在调用实例时包含该实例，而不是像vher2那样假设它立即可用。您应该在

上使用

而不是绑定
。您需要了解此
的范围。基本上，在单击事件中，上下文（此
）不再是MyClass的实例，而是被单击的元素，因此没有定义addText。@epascarello ok，有什么区别？@Kevin B所以Javascript匿名函数不同于Java匿名函数，在Java匿名函数中，Javascript无法找到当前嵌套级别之外的函数？@SoulDZIN不，它可以，只是与您定义它的方式不同。通常，当您调用实例的方法时，您希望在调用实例时包含该实例，而不是像vher2那样假设它立即可用。这非常有效。谢谢你的及时回复！这是应该如何处理这些情况，还是这是糟糕设计的症状？@SoulDZIN这是问题的典型解决方案，另一种选择是使用iife将此
传递到函数中，或者使用函数.bind
或jQuery.proxy
控制上下文。但是，定义一个变量是处理它的正常方法。这非常有效。谢谢你的及时回复！这是应该如何处理这些情况，还是这是糟糕设计的症状？@SoulDZIN这是问题的典型解决方案，另一种选择是使用iife将此
传递到函数中，或者使用函数.bind
或jQuery.proxy
控制上下文。定义一个变量是处理它的正常方式。