0

jQuery .loadメソッドを使用してすべてのWebサイトページを読み込もうとしているので、Webサイトは次のようになります。

<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>

このコードを使用すると、class = "link"を取得するすべてのリンクが、私のページをdiv#contentにロードします。正常に動作します！問題はありませんが、test.phpをロードするときに、リンクやボタンなどでclass = "link"を使用すると、機能せず、新しいページが#contentの外にロードされます。

すでにこれを新しくロードされたファイルにコピーしようとしましたが、機能しません。誰かがヒントを得ましたか？

ありがとう

4

1 に答える 1

2

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

したがって、これを念頭に置いて、これを置き換える必要があります。

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

これとともに：

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

（可能な限りタグを指定する方がはるかに効率的であるため、セレクターにa。を追加しました）

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

于 2009-08-04T06:01:00.870 に答える