dom - .on() dom の変更を検出しない

Question

仕事をするのにいくつか問題があります.on()。私のサイトはこちらです。

www.eliteweb-creation.co.uk/dev/js/nav.js を見ると、いくつかの on mouseenter&mouseleaveイベントハンドラーを設定しています。$('a.left.active')

将来この投稿を閲覧する人のために、jsfiddle にコードを追加しました。

クリックするとアンカーが.active動的に追加されるため、.on()代わりにを使用.click()して、jQuery が dom の変更を検出し、イベントハンドラーを追加します。

クラスを追加する前の.on("click")アンカー.activeが正常に機能しているため、問題.on()はクラスの変更を検出しないことのようです。

ありとあらゆる助けをいただければ幸いです。

score 4 · Accepted Answer

を使用.on()しても、魔法のようにコードが変更を検出するわけではありません。

変更されない祖先要素からクリックイベントハンドラーを委任する必要があります。

$('.nav').on('click', 'a.active', function(e) {
    // Put your code here...        
});

score 0 · Accepted Answer

.on実行時に基準に適合する要素にのみアタッチされるため、そのような定義をに入れることをお勧めしdocument.readyます。

jQuery APIから：

イベントハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが.on（）を呼び出すときにページに存在している必要があります。

.on定義を再度実行しない限り、新しく変更された要素は再評価されません。必要に応じて、定義をより広くし、追加のクラスを確認することができます。

$('a.left').on("click", function(event){
  if($(this).hasClass('active')) {
    // Do fancy stuff here
  }
});

編集：コードのクリーンアップ

2 に答える 2