2

例外を生成するこの単純な小さなコードの平和があります:(クロムのみ)

キャッチされないエラー: 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();
    });
}

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 に答える