Question

我有这个简单的小代码，产生异常:(仅限铬）

未捕获错误：NotFoundError：DOM异常8

场景：如果用户访问了textbox并且没有输入值，则会在bluring时通知他。 textbox将包含red div。如果他点击 - （为了输入值） - 红色div被移除（通过unwrap文本框）。

所以

我有一个文本框。
此文本框附加了模糊处理程序。
当出现模糊时，我正在检查是否输入了值。
- 如果输入了值：一切正常。什么都没做。
- 如果不是：
  - 我alert用户
  - 我用textbox包裹，带有红色边框
  - 我附加了click event handler，以便用户点击文本框（为了输入值）边界消失了。

问题：

当用户提醒时，red-div包裹textbox，每次点击文本框上的（按顺序）设置值） - 我得到了异常（显然事情搞得一团糟）

问题：

Why它是否正在发生，how可以修复它吗？

代码：（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();
    });
}

p.s。：

1）我想保持包装带有红色div的元素的想法，并在用户点击时删除它（为了放置一个值）。（因为这是我的插件的一小部分，已经像这样工作）

2）FF

中存在无问题

3）铬版：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。

Answer 2

问题是当你打开输入元素时会触发blur事件。在这种情况下使用.one()会更安全：

function blurOn()
{
  $("body").one("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.one('focus', function () {
       obj.unwrap().focus();
       blurOn(); // enable blur event handler again
    });
}

blurOn();

Demo

当使用Jquery的unwrap（）时，为什么我会得到“DOM Exception 8”？

2 个答案: