以下是我学习过程中出现的错误,哪位大神能帮忙下呢,小弟非常感谢啊!代码如下:
/*
 * 就地编辑器实例
 */
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>
我知道浏览器不同,监听器也是不同的,本想自己总结下的,但是自己这方面还不是很清楚,希望路过的大神能帮忙总结下,真的很感谢哈!

解决方案 »

  1.   

    试下直接用jquery的事件绑定?
      

  2.   

    看一下行不行<!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>
      

  3.   

    多了个<body></body>
    去掉试试
      

  4.   

        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();
            });
        }