新しく追加されたクラスが表示されない関数

Question

マウスオーバー時にテキストの色がフェードインまたはフェードアウトするナビゲーションがあります。これは、非アクティブなクラスに基づいて行います。

これは、最初にアクティブなページを除いて完全に機能します。

ページを（ajax経由で）変更すると、以前は「アクティブ」だった要素に「非アクティブ」クラスを追加しますが、私の関数はそのように通知しません。私は、アクティブなクラスが削除され、非アクティブなクラスが正しく追加されたことをWebインスペクタで確認できます。助言がありますか？

('header#primary nav a.inactive').hover(
    function(){ 
     $(this).stop().animate({'color': '#ffffff'}, 'slow'); 
    }, 
    function() { 
     $(this).stop().animate({'color': '#a2a2a2'}, 'slow'); 
    }); 

Answer 1

あなたは、動的に追加された要素のためのjQuery live機能を使用する必要があります。

$('header#primary nav a.inactive').live('mouseenter' ,function(){ 
      $(this).stop().animate({'color': '#ffffff'}, 'slow'); 
     }).live('mouseleave', 
     function() { 
      $(this).stop().animate({'color': '#a2a2a2'}, 'slow'); 
     }); 

http://api.jquery.com/live/

Answer 2

短い答え：代わりに.live()または.delegate()機能を使用しています。 jQueryのドコがどのように機能するか説明しています。hover()のショートカットの代わりにmouseenter()とmouseleave()の組み合わせを使用する必要があります。

ミディアム答え：あなたのコードのようなイベントハンドラを直接jQueryのセレクタに基づいて（何でも、ホバー、クリックするかどうか）を、割り当てる

：

$('header#primary nav a.inactive').hover(/* your code */); 

「DOMのすべてを見つけると言いますこの時点でセレクタと一致する要素をに配置し、それらにイベントハンドラ（ホバー）を割り当てます。 "将来的にセレクタと一致するようにエレメントを変更することはできません。また、エレメントが変更されてもはや一致しなくなった場合、エレメントからハンドラを削除することはありません。

代わりにあなたが今または将来でセレクタに一致する要素のためのイベントを処理するた、.live()または.delegate()を使用したいです。

長い答え：私はこれを書く時間がありません。実際には、.live()と.delegate()がjQueryドコでどのように扱われているか説明する必要はありません。