javascript - jQuery(附加、分离、重新附加)事件处理程序问题

Question

我想做的是使数据表可编辑。所以特征流是这样的。

1. 点击单元格时，将创建输入。因此，无论单元格具有什么，它都将被覆盖并移动到 created 输入的值。 (查看 DataTables Editor 的示例，它是这样工作的。)

2. 根据输入的模糊。 (按 Enter 键也会触发 blur)

   一个。如果值没有改变，它会回到一个正常的单元格(当然它的值没有改变)

   如果值已更改，它将保留为输入。

因此，如果我对单元格进行了编辑，它应该在模糊时保留为输入，但如果我再次对该单元格进行编辑，这次是输入原始值，UPON BLUR，它应该现在收缩回​​一个单元格。

但是奇怪的事情发生了。这是流程。

1. 我单击一个单元格，进行编辑，使其失去焦点。 (所以它将保留为输入)

2. 我单击另一个单元格，进行编辑，使其失去焦点。 (它也将保留为输入)

3. 现在，当我单击我首先编辑的单元格时，将其恢复为原始值。 UPON BLUR，我第二次编辑的单元格也返回到一个单元格中!

我怀疑这里有一个范围/引用问题。

请随时在 JSFiddle 中查看我的工作代码以进一步了解问题。

JSFiddle:http://jsfiddle.net/UvjnT/2512/

对于 JSFiddle，尝试执行这些操作(在第一行):

1. 单击带有 Trident 值的单元格。

2. 编辑它，比如添加一个字母。喜欢:aTrident

3. 现在失去焦点，它将保留为输入。

4. 尝试点击具有 Internet 值的单元格。

5. 编辑它，对我来说它是:aInternet

6. 失去焦点。它将保留为输入。

7. 现在单击具有 Trident 值的单元格。

8. 将其编辑回 Trident。

9. 查看错误发生情况。

向您证明该功能正在运行，只是存在一个错误。

尝试编辑一个单元格，失去焦点，再次将其编辑为其原始值，然后观察它缩小回一个单元格。 :D

帮助将是 greaaaaaaat! :)

我在表格内的 td 元素的每次点击 上运行以下代码。

el.html('<input class="table-edit form-control input-sm" type="text" value="' + val + '" />');
el.off('click');
input = el.children('input').first();
input.focus();
input.on('keyup', function(e) {
  if (e.which == 13) {
    $(this).blur();
  }
});
input.on('blur', function(e) {
  newVal = $(this).val();
  if (val == newVal) {
    input.css('font-weight', 'normal');
    input.parent('td').css('outline', 'none');
    input.off('blur keyup');
    input.fadeOut('fast', function() {
      el.html(val);
      toInput(el, val);
    });
  } else {
    input.parent('td').css('outline', '1px solid #F79421');
  }
});

Answer 1

看来问题出在这里:

input.fadeOut('fast', function() {
      el.html(val);
      toInput(el, val); // <- this
    });

更正:您忘记在 newVal = $(this).val(); 处添加 var。这导致变量 newVal 被全局定义。

Corrected JSFiddle