Javascript 新添加的元素可以'；t使用jQuery API closest（）在DOM树中遍历它的祖先，返回；“未定义”；

以下代码的思想是实现“点击编辑”功能

编辑。当用户单击“编辑”按钮时，“编辑组件”（一个输入栏和两个用于取消或确认的按钮）将替换原始文本，“编辑”按钮被禁用

取消。当用户单击“取消”按钮时，原始文本将替换编辑组件，“编辑”按钮将启用

确认。当用户单击“提交”按钮时，新文本将替换编辑组件，“编辑”按钮将启用

该操作基于5个类：

.rootClickEdit

、

text edit

、

buttonEdit

、

buttonOk

和

buttonCancel

有两种html代码由js代码控制

html1：

<div class="row rootClickEdit">
  <div class="col-xs-2 stigmod-attri-cont-left">name</div>
  <div class="col-xs-6 stigmod-attri-cont-middle textEdit">CourseActivity</div>
  <div class="col-xs-4 stigmod-attri-cont-right">
    <div class="stigmod-hovershow-cont">
      <span class="glyphicon glyphicon-edit buttonEdit"></span>
    </div>
  </div>
</div>

名称
课程活动

html2：

<div class="row rootClickEdit">
  <div class="col-xs-8" id="stigmod-classname">
    <span class="stigmod-keepinline">
      <span class="glyphicon glyphicon-th-large" id="stigmod-classname-icon"></span>
      <span id="stigmod-classname-title">CLASS</span>
      <span> |&nbsp;</span>
    </span>
    <span class="textEdit">CourseActivity</span>
  </div>
  <div class="col-xs-4">
    <div class="btn-group pull-right">
      <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-plus" data-toggle="tooltip" data-placement="left" data-original-title="Add a new attribute"></span>
      </button>
      <button type="button" class="btn btn-default buttonEdit">
        <span class="glyphicon glyphicon-edit" data-toggle="tooltip" data-placement="left" data-original-title="Edit class name"></span>
      </button>
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <span class="glyphicon glyphicon-cog" data-toggle="tooltip" data-placement="left" data-original-title="Configurations"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#">Delete this class</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>  

班
| 
课程活动

jQuery：

$(function() {
  function submitEdit(event) {
    var newText = $(this).parent().prev().val();  // get palceholder
    $(this).parent().parent().parent().html(newText);  // use the new text to replace the editing component
    // enable editing function
    var buttonDisable = $(this).closest('.rootClickEdit').find('.buttonEdit');
    var tagName = buttonDisable[0].tagName;
    if ('BUTTON' === tagName) {
      buttonDisable.removeClass('disabled');
    } else if ('SPAN' === tagName) {
      buttonDisable.addClass('glyphicon-edit');
    }
    event.preventDefault();
  }
  function cancelEdit(event) {
    var originalText = $(this).parent().prev().attr('placeholder');  // get palceholder
    $(this).parent().parent().parent().html(originalText);  // use the original text to replace the editing component
    // enable editing function
    var buttonDisable = $(this).closest('.rootClickEdit').find('.buttonEdit');
    var tagName = buttonDisable[0].tagName;
    if ('BUTTON' === tagName) {
      buttonDisable.removeClass('disabled');
    } else if ('SPAN' === tagName) {
      buttonDisable.addClass('glyphicon-edit');
    }
    event.preventDefault();  
  }
  function editElem(event) {
    var originalTextElem = $(this).closest('.rootClickEdit').find('.textEdit');
    var originalText = originalTextElem.text();
    var editComponent = 
      '<span class="input-group input-group-xs">' +
        '<input type="text" class="form-control" value="' + originalText + '" placeholder="' + originalText + '">' +
        '<span class="input-group-btn">' +
          '<button class="btn btn-default buttonOk" type="button"><span class="glyphicon glyphicon-ok"></span></button>' +
          '<button class="btn btn-default buttonCancel" type="button"><span class="glyphicon glyphicon-remove"></span></button>' +
        '</span>' +
      '</span>';
    var buttonDisable = $(this);
    alert($(this)[0].tagName + '\n' + $(this).parents().attr('class'));
    var tagName = buttonDisable[0].tagName;
    if ('BUTTON' === tagName) {
      buttonDisable.addClass('disabled');
    } else if ('SPAN' === tagName) {
      buttonDisable.removeClass('glyphicon-edit');
    }
    originalTextElem.html(editComponent);  // use the editing component to replace the original text，and put the original text into placeholder
    event.preventDefault();
  }
  $('.rootClickEdit').on('click', '.buttonEdit', editElem); // click to edit
  $('.rootClickEdit').on('click', '.buttonOk', submitEdit); // submit the editing
  $('.rootClickEdit').on('click', '.buttonCancel', cancelEdit); // cancel the editing
});

$（函数（）{
函数提交（事件）{
var newText=$（this.parent（）.prev（）.val（）；//获取palceholder
$（this.parent（）.parent（）.parent（）.html（newText）；//使用新文本替换编辑组件
//启用编辑功能
var buttonDisable=$（this）.closest（'.rootClickEdit'）.find（'.buttonEdit'）；
变量标记名=按钮可启用[0]。标记名；
如果（'按钮'==标记名）{
buttonDisable.removeClass（'disabled'）；
}else if（'SPAN'==标记名）{
addClass（'glyphicon-edit'）；
}
event.preventDefault（）；
}
函数取消编辑（事件）{
var originalText=$（this.parent（）.prev（）.attr（'placeholder'）；//获取palceholder
$（this.parent（）.parent（）.parent（）.html（originalText）；//使用原始文本替换编辑组件
//启用编辑功能
var buttonDisable=$（this）.closest（'.rootClickEdit'）.find（'.buttonEdit'）；
变量标记名=按钮可启用[0]。标记名；
如果（'按钮'==标记名）{
buttonDisable.removeClass（'disabled'）；
}else if（'SPAN'==标记名）{
addClass（'glyphicon-edit'）；
}
event.preventDefault（）；
}
函数editElem（事件）{
var originalTextElem=$（this）.closest（'.rootClickEdit'）.find（'.textEdit'）；
var originalText=originalTextElem.text（）；
变量editComponent=
'' +
'' +
'' +
'' +
'' +
'' +
'';
var buttonDisable=$（此项）；
警报（$（this）[0]。标记名+'\n'+$（this.parents（）.attr（'class'））；
变量标记名=按钮可启用[0]。标记名；
如果（'按钮'==标记名）{
buttonDisable.addClass（'disabled'）；
}else if（'SPAN'==标记名）{
removeClass（'glyphicon-edit'）；
}
originalTextElem.html（editComponent）；//使用编辑组件替换原始文本，并将原始文本放入占位符
event.preventDefault（）；
}
$（'.rootClickEdit'）。在（'click'，'.buttonEdit'，editElem）；//单击可编辑
$（'.rootClickEdit'）。在（'click'，'.buttonOk'，submitEdit）；//提交编辑
$（'.rootClickEdit'）。在（'click'，'.buttonCancel'，cancelEdit）；//取消编辑
});

问题是

$（this）.函数
cancelEdit（）
中最近的（'.rootClickEdit'）

返回

未定义的
，而不是
元素。为什么？如何修复它？

顺便说一句，实现“点击编辑”的方式完全是我的直觉。有没有更好的办法？谢谢
 问题在于，在您尝试查找编辑按钮之前，cancelEdit（）函数中的cancel按钮已被删除。将该行移到替换html的位置上方即可：

function cancelEdit(event) {
    var buttonDisable = $(this).closest('.rootClickEdit').find('.buttonEdit');
    var originalText = $(this).parent().prev().attr('placeholder');  // get palceholder
    $(this).parent().parent().parent().html(originalText);  // use the original text to replace the editing component
    // enable editing function
    var tagName = buttonDisable[0].tagName;
    if ('BUTTON' === tagName) {
      buttonDisable.removeClass('disabled');
    } else if ('SPAN' === tagName) {
      buttonDisable.addClass('glyphicon-edit');
    }
    event.preventDefault();  
}

这是因为您将cancelEdit函数附加到
.rootClickEdit
元素的onClick侦听器。所以
$（这个）
已经给了您
element@Ronald01990带有三个参数的jqueryapi
on（）
并不像您所说的那样工作。在
$（'.rootClickEdit'）的回调函数
editElem（）
中，在（'click'，'.buttonEdit'，editElem'）上
，则
$（this）
的值是
.buttonEdit
元素，而不是
。rootClickEdit
。我通过
alert（$（this.attr（'class'））检查了这一点在
editElem（）
中。其他两位听众也是。哦，是的，我的错。我发现了你的错误。你解决了我的问题，我会在一分钟内给出答案。我是js的新手。即使在
$（this.parent（）.parent（）.parent（）.parent（）.html（newText）之后删除取消按钮
，DOM树的删除部分仍然存在于函数
cancelEdit（）
，该函数规定在删除部分内部进行遍历，例如
$（this）.closest（'.input group'）
。那使我失明了。多谢各位~