1

按下提交按钮时出现以下错误:

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>

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

编辑

这是我学到的:

  • “click”处理函数找不到函数“addText”,因为“this”不再引用类实例,而是事件的发送者。

  • 为了解决这个问题,我应该将当前的“this”范围保存在处理函数之外的变量中。

  • 我不确定以这种方式处理事件是否是不好的做法,但它有效,所以我会接受它。

  • 另外,我应该使用“on”而不是“bind”,因为无论如何,“bind”似乎都调用了“on”。

感谢大家的快速回复!

4

1 回答 1

5

试试这个:

MyClass.prototype.listenToButton = function(btn) {
        var that = this;
        $(btn).bind({
            click: function(event) {
                that.addText($(this).parent());
            }
        });
    };
于 2013-04-23T15:26:22.547 回答