0

現在、新しいポートフォリオに取り組んでいます。問題を確認するには、 http://www.zeiteffekt.de/relaunch/#mmd にアクセスして [詳細] をクリックしてください。そこで何が起こるかというと、新しい html ファイルが ajax 経由で読み込まれるというスライド トグル効果があります。

$(".show_details").click(function(){            
        $("#mmd_details").slideToggle("slow");
    });

$(document).ready(function() {
      // select all the links with class="load_content", when one of them is clicked, get its "href" value
      // adds a "loading..." notification, load the content from that URL and
      $('a.load_content').click(function() {
        var url = $(this).attr('id');
        $('#mmd_details').html('Laden...').load(url);
        return false;
      });
    });

私の問題は次のとおりです。 ajax によってロードされた html ファイルに単純な「閉じる」リンクがあり、div コンテナーを単に切り替えません。最初の「詳細」リンクをクリックすると、div が閉じます。読み込まれた html 内の同じリンクはそれを行いません。

また、ajax によってロードされた html ファイル内で使用すると、scrollTo は機能しません。

これがスクロール機能です。

$(document).ready(function() {
        $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 700);
        });
    });

jquery スクリプトが ajax ファイルで機能しない理由がまったくわかりません。あなたが私を助けてくれることを願っています。

乾杯、ティム

4

2 に答える 2

1

jQuery は、ページの読み込みが完了すると、そのイベント ハンドラーを dom にバインドします。後で ajax などを介して domに追加すると、jQuery は新しい要素を認識しません。

jQuery のバージョンに応じて、' on ' または 'live'を使用する必要があります。

于 2013-01-31T18:04:27.627 に答える
0

私は使用していませんjQuery.load()が、ドキュメント ( http://api.jquery.com/load/ ) には、読み込まれた HTML 内のインライン スクリプトが評価されることが示されていません。

コールバック関数を に渡すことができることを指定していますが、それがload()最善の策だと思います:

$('#mmd_details').html('Laden...').load(url, function() {
  $(".scroll").click(function(event){     
     event.preventDefault();
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 700);
  });
});

jQuery の「on」バインド メソッドを使用したときはいつでも、将来の要素にバインドするために、DOM 内のセレクターに一致する要素が少なくとも 1 つ必要でした。私はそれを間違って使用している可能性があるので、修正を受け付けています:)

于 2013-01-31T19:29:28.773 に答える