2

我有这个生成异常的简单代码和平：（仅在 chrome 中）

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

场景：如果用户访问了 atextbox并且没有输入值，他会在什么时候得到通知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();
    });
}

ps：

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

2）FF中没有问题

3) 镀铬版本：25.0.1364.97 m

4）jQuery：1.8

4

2 回答 2

2

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

$("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
    });
}

更新的测试在这里。

于 2013-03-06T08:18:34.723 回答
1

问题是当您打开输入元素时会触发 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();

演示

于 2013-03-06T08:44:01.853 回答