2

Karl Swedberg のブログでイベントのバインドとバインド解除に関する素晴らしい記事 (私は jQuery を使用する js の初心者であるため) を読んでいましたが、コードのこの部分 (簡潔にするために簡略化されています) に完全に戸惑いました:

    function addItemUnbind() {
      $Add a button but it won't have it's event added;
      addItemUnbind();
  });

同じ関数をそれ自体の中に入れることで、無限ループに実行し続けないのはなぜですか? しかし、イベントを要素に再バインドするために使用されます...!?

4

4 に答える 4

9

私があなたの例を伝えることができる限り。ただし、あなたの例は、参照している Web サイトの例と同じではありません。

function addItemUnbind() {
  $('#list6 li.special button')
    .unbind('click')
    .bind('click', function() {
      var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
      $(this).parent().after($newLi);
      addItemUnbind();
  });
}

この例では、ユーザーがボタンをクリックすると「addItemUnbind」が呼び出されます。

于 2008-12-11T03:22:26.330 に答える
3

呼び出しが内部関数内にあるためです。

たとえば、彼は addItemUnbind() でいくつかのことを行い、それらの 1 つは関数をボタン クリックにバインドすることです。

この関数は、たとえば addItemUnbind() 内で次のように宣言されます。

.bind('click', function() {
  var $newLi = $('<li class="special">special and new <button>I am new</button></li>');
  $(this).parent().after($newLi);
  addItemUnbind();
  }

ここの中括弧内のコードは、addItemUnbind() が呼び出されたときに評価されるのではなく、クリックが発生したときに評価されます。

于 2008-12-11T03:23:07.483 に答える
0

取り出したコードの一部に答えが隠れています。あなたが投稿したものは確かに無限ループです。ただし、リンクされたブログ投稿から変更された、より完全な (ただし簡略化された) 例を次に示します。

function addItemUnbind() {
  bind('click', function() {
    addItemUnbind();
  });
}

addItemUnbind の呼び出しは、クロージャー (それを作成した addItemUnbind 関数とは別の新しい無名関数) 内にあります。すぐに呼び出されるのではなく、新しい関数への参照がバインド関数に渡されます。したがって、バインド関数が次のようになっているとします。

function bind(eventName, eventHandler) {
  eventHandler();
}

eventHandler の呼び出しが addItemUnblind に戻るため、無限ループが発生します。しかし、次のようになっている場合:

function bind(eventName, eventHandler) {
  this.events[eventName] = eventHandler; // save the event handler to call when an event happens
}

それなら問題ありません。addItemUnbind を呼び出すのではなく、後で呼び出す関数への参照を保存するだけです。

于 2008-12-11T03:31:23.600 に答える
0

ああ....多くのことのように....「観察ダニエル！」。確かに、イベント処理が機能すると思っていた方法にも異常があったため、既に知っていると思っていた記事をざっと読み飛ばしてしまいました。丁寧な説明のおかげでよくわかります。

于 2008-12-11T04:27:33.953 に答える