1

ajax を使用してコンテンツを読み込んでいます。コンテンツを#contentdiv に読み込んだ後main.js、読み込んだコンテンツに対して適用した効果が機能しません。たとえば、これは機能しません。

/* Artworks Hide/show text */
$(".item").hover(function() {
  //fadein second image using jQuery fadeIn 
  $(this).find(".art_title").fadeIn(200);
}, 
function () {
  //fadein first image using jQuery fadeIn
  $(this).find(".art_title").fadeOut(200);
});

コンテンツを ajax でロードせずにページ全体の効果をテストすると、うまく機能します。したがって、問題はその方法でロードされることです。

どうすれば修正できますか？

私は2つのファイルを使用しています:loader.jsコンテンツをロードするためとmain.js、効果がある

4

4 に答える 4

2

新しいコンテンツを DOM に挿入していて、定義したホバー機能を認識していないためです。

解決策：jQueryを使用on

$(function(){
   $(document).on("mouseover",".item",function(){
      $(this).find(".art_title").fadeIn(200);
   });
   $(document).on("mouseleave",".item",function(){
      $(this).find(".art_title").fadeOut(200);
   });
});
于 2012-10-12T13:50:33.720 に答える
2

新しいコンテンツが Ajax 呼び出しで読み込まれた後に JavaScript コードを呼び出していますか。

呼び出す$(".item").hoverと、その時点で存在する要素に追加されます。呼び出された後に存在する要素は検索されません。

jQuery 1.7 以降を使用している場合は、on を使用して body に添付すると、動作を開始するはずです。1.8 では、ホバーは廃止されたため、マウス イベントを個別にアタッチする必要があります。

$(document).on("mouseenter", ".item", function() {
    $(this).find(".art_title").stop().fadeIn(200);
}).on("mouseleave", ".item", function () {
    $(this).find(".art_title").stop().fadeOut(200);
});
于 2012-10-12T13:50:59.523 に答える
1

これらのイベントをロード完了コールバックに添付していますか?

$("#content")
    .load("remote_content.htm", function () {
        $(".item").hover(function () {
            //fadein second image using jQuery fadeIn 
            $(this).find(".art_title").fadeIn(200);
        }, function () {
            //fadein first image using jQuery fadeIn
            $(this).find(".art_title").fadeOut(200);
        });
    });
于 2012-10-12T13:56:48.717 に答える
0

これは、コードが行うことは、これらのスクリプトをイベントに添付しているためです。ただし、コードは単独では実行されません。添付する必要があります。

これをやってみて、コード全体を関数にカプセル化します。ajax からの応答を取得したら、コンテンツを div に配置すると同時に、javascript コード全体をカプセル化した javascript 関数を呼び出します。これにより、コードがイベントにバインドされます。

これで、イベントを表示できるはずです。

于 2012-10-12T13:52:23.097 に答える