Question

我有这个功能：

  var save = document.getElementById('savethis'+this.parentNode.childNodes[1].id);
    save.addEventListener('click', savethis.bind(this), false);

function savethis() {
  this.removeEventListener('click', edit);
  var a = this.childNodes[0].childNodes[0].id;
  console.log(a);
  var b = document.getElementById(a);
  console.log(document.getElementById(a).id.replace('minedit',''));
  console.log(b.value);
  this.innerHTML = b.value;
  this.parentNode.cells[4].className = 'text-center min-edit';


  setTimeout(function() {this.addEventListener('click',edit);},1);
}

在另一个功能中：

var minedit = document.getElementsByClassName('min-edit');
 for (var m=0;m<minedit.length;m++){
    minedit[m].addEventListener('click', edit);
 }

function edit(){

    var avalue = this.innerHTML;
console.log(avalue);
    if (this.className.indexOf('input-open')>=0){

}

else {
    this.className += ' input-open';
    var content = '';
    content += '<div class="input-group editable-input"><input type="text" id="minedit'+this.parentNode.childNodes[1].id+'" value="'+parseFloat(avalue).toFixed(2)+'" class="form-control"><span class="input-group-addon editable-input" id="savethis'+this.parentNode.childNodes[1].id+'"><i class="ion-android-done" ></i></span><span class="input-group-addon editable-input"><i class="ion-android-close" id="close"></i></span></span></div>';
    this.innerHTML = content;


    valuenow = document.getElementById('minedit'+this.parentNode.childNodes[1].id).value;
    id = document.getElementById('minedit'+this.parentNode.childNodes[1].id).id;
 var save = document.getElementById('savethis'+this.parentNode.childNodes[1].id);
    save.addEventListener('click', savethis.bind(this), false);


}

}
function savethis() {
  this.removeEventListener('click', edit);
    var a = this.childNodes[0].childNodes[0].id;
    var b = document.getElementById(a);
    this.innerHTML = b.value;
    this.parentNode.cells[4].className = 'text-center min-edit';
    setTimeout(function() {this.addEventListener('click',edit);},1);
}

正如您在fiddle中看到的那样，输入框的打开和关闭在第一次点击时起作用，但在第二次点击时我得到一个错误说

TypeError: this.className is undefined

指着这一行：

 if (this.className.indexOf('input-open')>=0){

我完全不知道为什么className可能是未定义的，因为我在savethis函数中定义了它的名字。

有人可以解释和帮助吗？

Answer 1

范围错误

setTimeout(function() {this.addEventListener('click',edit);},1);

this是运行时的文档，而不是元素。

var that = this;
setTimeout(function() {that.addEventListener('click',edit);},1);

或将bind（）与现代浏览器一起使用

setTimeout( (function() {this.addEventListener('click',edit);}).bind(this),1);

函数后找不到/未定义className

1 个答案: