javascript - 新添加的元素无法使用jQuery API close()在DOM树中遍历其祖先，返回“undefined”

以下代码的目的是实现“单击编辑”功能。


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


该操作基于5个类别：.rootClickEdit，textEdit，.buttonEdit，.buttonOk和.buttonCancel。

有两种js代码控制的html代码。

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

问题在于函数$(this).closest('.rootClickEdit')中的cancelEdit()返回undefined而不是<div class="row rootClickEdit">元素。为什么？以及如何解决？

顺便说一句，实现“点击编辑”的方式完全是我的直觉。有什么更好的方法吗？谢谢！

最佳答案

问题在于，尝试查找编辑按钮之前，已在cancelEdit（）函数中删除了取消按钮。将那条线移到替换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();
}