首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

一个关于继承实例中监听器不起作用出现的异常,求解答

2012-11-10 
一个关于继承实例中监听器不起作用出现的错误,求解答以下是我学习过程中出现的错误,哪位大神能帮忙下呢,小

一个关于继承实例中监听器不起作用出现的错误,求解答
以下是我学习过程中出现的错误,哪位大神能帮忙下呢,小弟非常感谢啊!代码如下:

JScript code
/* * 就地编辑器实例 */function EditInPlaceField(id,parent,value){    this.id = id;    this.value = value || 'default value';    this.parentElement = parent;    this.createElements(this.id);    this.attachEvents();}EditInPlaceField.prototype = {    createElements : function(id){                this.containerElement = document.createElement("div");        this.parentElement.appendChild(this.containerElement);                this.staticElement = document.createElement("span");        this.containerElement.appendChild(this.staticElement);        this.staticElement.innerHTML = this.value;                this.fieldElemtnt = document.createElement("input");        this.fieldElemtnt.type = "text";        this.fieldElemtnt.value = this.value;        this.containerElement.appendChild(this.fieldElemtnt);                this.saveButton = document.createElement("input");        this.saveButton.type = "button";        this.saveButton.value = "Save";        this.containerElement.appendChild(this.saveButton);                this.cancelButton = document.createElement("input");        this.cancelButton.type = "button";        this.cancelButton.value = "Cancel";        this.containerElement.appendChild(this.cancelButton);                this.convertToText();    },    attachEvents : function(){        var that = this;        //运行到这里监听事件不起作用了        addEventListener(this.staticElement,"click",function(){            that.convertToEditable();        });        addEventListener(this.saveButton,"click",function(){            that.save();        });        addEventListener(this.cancelButton,"click",function(){            that.cancel();        });    },    convertToEditable : function(){        this.staticElement.style.display = "none";        this.fieldElemtnt.style.display = "inline";        this.saveButton.style.display = "inline";        this.cancelButton.style.display = "inline";        this.setValue(this.value);    },    save : function(){        this.value = this.getValue();        var that = this;        var callback = {            success : function(){                that.convertToText();            },            failure : function(){                alert("Error saving value.");            }        };        //ajaxRequest('Get',"url",callback);     },    cancel : function(){        this.convertToText();    },    convertToText : function(){        this.staticElement.style.display = "inline";        this.fieldElemtnt.style.display = "block";        this.saveButton.style.display = "block";        this.cancelButton.style.display = "block";        this.setValue(this.value);    },    setValue : function(value){        this.fieldElemtnt.value = value;        this.staticElement.innerHTML = value;    },    getValue : function(){        return this.fieldElemtnt.value;    }}$(function(){    var titleClassical = new EditInPlaceField("titleClassical",$("#doc").get(0),"Title Here");    var currentTitleText = titleClassical.getValue();})<body>    <div id="doc"></div></body>


我知道浏览器不同,监听器也是不同的,本想自己总结下的,但是自己这方面还不是很清楚,希望路过的大神能帮忙总结下,真的很感谢哈!

[解决办法]
试下直接用jquery的事件绑定?
[解决办法]
看一下行不行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
function EditInPlaceField(id,parent,value){
this.id = id;
this.value = value || 'default value';
this.parentElement = parent;
//this.createElements(this.id);
//this.attachEvents();
}
EditInPlaceField.prototype = {
createElements : function(){

this.containerElement = document.createElement("div");
this.parentElement.appendChild(this.containerElement);

this.staticElement = document.createElement("span");
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML = this.value;

this.fieldElemtnt = document.createElement("input");
this.fieldElemtnt.type = "text";
this.fieldElemtnt.value = this.value;
this.containerElement.appendChild(this.fieldElemtnt);

this.saveButton = document.createElement("input");
this.saveButton.type = "button";
this.saveButton.value = "Save";
this.containerElement.appendChild(this.saveButton);

this.cancelButton = document.createElement("input");
this.cancelButton.type = "button";
this.cancelButton.value = "Cancel";
this.containerElement.appendChild(this.cancelButton);

this.convertToText();
},
attachEvents : function(){
var that = this;
//运行到这里监听事件不起作用了
addEventListener(this.staticElement,"click",function(){
that.convertToEditable();
});
addEventListener(this.saveButton,"click",function(){
that.save();
});
addEventListener(this.cancelButton,"click",function(){
that.cancel();
});
},
convertToEditable : function(){
this.staticElement.style.display = "none";
this.fieldElemtnt.style.display = "inline";
this.saveButton.style.display = "inline";
this.cancelButton.style.display = "inline";
this.setValue(this.value);
},
save : function(){
this.value = this.getValue();
var that = this;
var callback = {
success : function(){
that.convertToText();
},
failure : function(){
alert("Error saving value.");
}
};
//ajaxRequest('Get',"url",callback); 
},
cancel : function(){
this.convertToText();
},
convertToText : function(){
this.staticElement.style.display = "inline";
this.fieldElemtnt.style.display = "block";
this.saveButton.style.display = "block";
this.cancelButton.style.display = "block";
this.setValue(this.value);
},
setValue : function(value){
this.fieldElemtnt.value = value;
this.staticElement.innerHTML = value;
},
getValue : function(){
return this.fieldElemtnt.value;
}
}

$(function(){
var titleClassical = new EditInPlaceField("titleClassical",$("#doc").get(0),"Title Here");
titleClassical.createElements();
var currentTitleText = titleClassical.getValue();
})

</script>
</head>

<body>


<body>
<div id="doc"></div>
</body>
</body>
</html>
[解决办法]
多了个<body></body>
去掉试试
[解决办法]

JScript code
    attachEvents: function () {        function addEventListener(el, evt, handler) {//添加事件            if (el.addEventListener) el.addEventListener(evt, handler, false);            else el.attachEvent('on' + evt, handler);        }        var that = this;        //IE要attachEvent,并且这样绑定是个window添加事件了        addEventListener(this.staticElement, "click", function () {            that.convertToEditable();        });        addEventListener(this.saveButton, "click", function () {            that.save();        });        addEventListener(this.cancelButton, "click", function () {            that.cancel();        });    } 

热点排行