javascript - 为什么我在使用 Jquery 的 unwrap() 时得到 "DOM Exception 8"？

Question

我有一个生成异常的简单小代码:(仅在 chrome 中)

Uncaught Error: NotFoundError: DOM Exception 8

场景:如果用户访问了一个文本框但没有输入值，他将在bluring时收到通知。
textbox 将被包裹在 red div 中。如果他点击 - (为了输入一个值) - 红色 div 将被删除(通过 unwrap 文本框)。

所以

• 我有一个文本框。
• 此文本框附有模糊处理程序。
• 当出现模糊时，我正在检查是否已输入值。
  • 如果输入了一个值:一切正常。什么都没做。
  • 如果不是:
    • 我提醒用户
    • 我用红色边框包裹了 textbox
    • 我附加了一个点击事件处理程序，这样如果用户点击文本框(为了输入一个值)边界消失。

问题:

当用户收到警报并且 red-div 包裹了 textbox 时，每次我点击文本框(为了放置一个值)-我得到了异常(显然事情搞砸了)

问题:

为什么会发生这种情况，如何我可以修复它？

代码:(JSBIN)

$("body").on("blur", ".myTb", function () {

    if (!$(this).val()) {
        alert('you must enter something!');
        doWork($(this))
    }

});


function doWork(obj) {

    var t = $("<div class='divError'/>");

    obj.wrap(t);

 obj.on('click', function () {
        obj.unwrap();
    });
}

---

附:

1) 我想保留用红色 div 包装元素并在用户单击时将其删除的想法(以便输入值)。 (因为这是我的插件的一小部分，它已经像这样工作了)

2) FF没有问题

3) chrome 版本:25.0.1364.97 m

4) jquery: 1.8

Answer 1

我认为问题在于，您将输入字段包装了多次。一旦您测试错误包装器是否已经存在，错误就消失了:

$("body").on("blur", ".myTb", function () {
    if (!$(this).val()) {
        doWork($(this));
    }
});


function doWork(obj) {
    var t = $("<div class='divError'/>"),
        hasError = obj.closest('.divError').length;
  if(!hasError) {
    alert('you must enter something!');
    obj.wrap(t);
  }
  //console.log(obj);
  obj.on('click', function () {
    console.log(obj);
        obj.unwrap();
        obj.focus(); // be sure to set focus to the input element
    });
}

已更新 test is here .