Question

我有一个名为abc.js的文件，其代码为

var Calculator = Class.create();
Calculator.prototype = {
    initialize: function () {
      alert('initialize');
    },    
    calculate: function () {
      alert('Calculate on change');
    }       
}

和一个有下拉列表的html文件

<select name="calculator_select" id="calculator_select" onchange="calculator.calculate()">

我创建了计算器对象

 var calculator = new Calculator();

当页面被加载时，调用Calculator.prototype的初始化函数并且它会提醒初始化但是下拉计算器的更改计算器.calculate（）不会响应。

Answer 1

以下是一个有效的例子：http://jsfiddle.net/xRXE4/

一些提示：

- 停止在线添加事件（使用addEventListener，jquery的{{1}}）

- 使用on并打开控制台（F12）

- 包括在console.log

中使用DOM元素的代码

$(document).ready()

http://api.jquery.com/on/

addEventListener vs onclick

Answer 2

与PrototypeJS相同的例子，以及我的改进。

var Calculator = Class.create({
    initialize: function (element) {

      //define a property on the class
      this.element = $(element);

      //call another method on this class
      this.setuplistener();

      console.log('initialize');
    },
    setuplistener : function(){
        this.element.observe('change',this.calculate);
    },
    calculate: function (e) {
      console.log('Calculate on change');
    }       
});

document.observe('dom:loaded',function(){

    //make sure a new instance is created after the DOM is ready
    var calculator = new Calculator($('calculator_select'));

});

原型的初始化功能正在工作但更改事件不起作用

2 个答案: