jqueryのAJAXロード問題

Question

は、私のウェブサイトがどのように見えるかのthats：

このコードで

<script type="text/javascript"> 
    $(function() { 
    $('.link').bind('click', function(e) { 
      var page = $(this).attr('href'); 
      $('#site').addClass('loading'); 
      $('#content').load(page, function(){ 
      $('#site').removeClass('loading'); 
    }); 

    e.preventDefault(); 
    return false; 
    }); 

<a href="test.php" class="link">Test</a> 

、クラス=「リンク」を取得するすべてのリンクdiv #contentに自分のページを読み込みます。 正常に動作します。問題はありませんが、test.phpを読み込むときに、リンクやボタンなどでclass = "link"を使用すると、機能しなくなり、新しいページが#contentの外に読み込まれます。

すでにこのファイルを新しいファイルにコピーしようとしましたが、うまくいきません。だれかがヒントを得ましたか？

おかげ

Answer 1

イベントをバインドするときにのみ、その時点でDOMにある要素にバインドするためです。したがって、後で新しいものを追加すると、以前に添付したイベントにバインドされません。 jQuery 1.3を持っていると仮定すると、liveと呼ばれるこれを回避する組み込み関数があります。この機能を使用すると、イベントを現在および将来のすべての要素にバインドできます。すべてのイベントをサポートしているわけではありませんが、clickはサポートしています。これにより

$('.link').bind('click', function(e) { 

：

はそう心の中で、あなたはこのを交換する必要があることに保ち

$('a.link').live('click', function(e) { 

（私はAを追加したセレクタに、それははるかに効率的になるため。可能であればタグを指定してください）

jQuery 1.3をお持ちでない場合は、できるだけ早くアップグレードする必要があります。できない場合は、同じことを実現するプラグインをlivequeryでチェックしてください。ただし、それほどエレガントではありません。代わりに、新しいデータを読み込むたびにアクションをバインドして呼び出す機能を持たせることもできます。しかし、すべての考慮事項がありますが、jQueryのliveがこれを実行する最良の方法です。