コンテンツがAJAX経由で読み込まれた後、jQueryが機能しない

Question

オンthis page私はjQueryポップアップウィンドウとサムネイルサイズ変更可能な画像を持っています。サムネイルにマウスを重ねると、画像のサイズが完全に変更されます。また、フッターにある大きな黄色のTVボタン「QuickBook TV」をクリックすると、ポップアップが完全に表示されます。

しかし、「次へ」または「前へ」ボタンをクリックすると、AJAXが新しいコンテンツを読み込むために使用され、jQueryはポップアップまたはサムネイル画像の機能を失います。私はこの問題に関する情報を探している数々のフォーラムを検索しましたが、jQueryの知識が限られているため、何をする必要があるのか​​理解できませんでした。続き

は

$(document).ready(function() { 

     $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" }); 
     $(".inline").colorbox({ inline: true, width: "50%" }); 
     $(".callbacks").colorbox({ 
      onOpen: function() { alert('onOpen: colorbox is about to open'); }, 
      onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); }, 
      onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); }, 
      onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); }, 
      onClosed: function() { alert('onClosed: colorbox has completely closed'); } 
     }); 

     //Example of preserving a JavaScript event for inline calls. 
     $("#click").click(function() { 
      $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here."); 
      return false; 
     }); 
    }); 

jQueryのポップアップであり、これは、コンテンツを交換する際にあなたのイベントハンドラが失われているサムネイルのjQuery

$(function() { 

var xwidth = ($('.image-popout img').width())/1; 
var xheight = ($('.image-popout img').height())/1; 

$('.image-popout img').css(
     {'width': xwidth, 'height': xheight} 
); //By default set the width and height of the image. 

$('.image-popout img').parent().css(
     {'width': xwidth, 'height': xheight} 
); 

$('.image-popout img').hover(
    function() { 
     $(this).stop().animate({ 
      width : xwidth * 3, 
      height : xheight * 3, 
      margin : -(xwidth/3) 
      }, 200 
     ); //END FUNCTION 

     $(this).addClass('image-popout-shadow'); 

    }, //END HOVER IN 
    function() { 
     $(this).stop().animate({ 
      width : xwidth, 
      height : xheight, 
      margin : 0 
      }, 200, function() { 
       $(this).removeClass('image-popout-shadow'); 
    }); //END FUNCTION 

    } 
); 

}); 

Answer 1

jQueryセレクタは、コード実行時にDOM内に存在する一致要素を選択し、動的に更新しません。 .hover()などの関数を呼び出してイベントハンドラを追加すると、それらの要素にのみ追加されます。 AJAX呼び出しを行い、ページの一部を置き換えると、それらの要素を削除して、それらにバインドされたイベントハンドラと新しい要素で置き換えます。それらの要素がセレクタと一致しても、それを行うコードが既に実行されているため、イベントハンドラはバインドされません。

イベントハンドラ具体的にイベントハンドラの

（すなわち.click()）あなたはこの問題を回避するには、イベントの委任を使用することができます。基本的な原則は、すべての動的（AJAXが読み込まれた）コンテンツを含む静的（ページがロードされたときに存在し、置き換えられないときに存在する）要素にイベントハンドラをバインドすることです。 jQuery documentationでイベント委任の詳細を読むことができます。あなたのclickイベントハンドラの

、更新されたコードは次のようになります。ドキュメント全体にイベントハンドラをバインドします（そのページがアンロードされるまで削除されることはありません飽きないだろう）

$(document).on('click', "#click", function() { 
    $('#click').css({ 
     "background-color": "#f00", 
     "color": "#fff", 
     "cursor": "inherit" 
    }).text("Open this window again and this message will still be here."); 
    return false; 
}); 

、反応しました clickの idプロパティを持つ要素のイベントには、 clickイベントが割り当てられます。理想的には、DOM内のダイナミックエレメントに近いものを使用すること（理想的にはページ上の <div>）が、効率を少し向上させるため、すべてのページコンテンツが含まれます。

.hover()を処理する必要があるときに問題が発生します。JavaScriptに実際のhoverイベントはありません。jQueryは、イベントハンドラをmouseenterとmouseleaveイベントにバインドするのに便利な省略形としてその機能を提供しています。

$(document).on({ 
    mouseenter: function() { 
     $(this).stop().animate({ 
      width: xwidth * 3, 
      height: xheight * 3, 
      margin: -(xwidth/3) 
     }, 200); //END FUNCTION 

     $(this).addClass('image-popout-shadow'); 
    }, 
    mouseleave: function() { 
     $(this).stop().animate({ 
      width: xwidth, 
      height: xheight, 
      margin: 0 
     }, 200, function() { 
      $(this).removeClass('image-popout-shadow'); 
     }); //END FUNCTION 

    } 
}, '.image-popout img'); 

---

jQueryのプラグインイベントハンドラのバインディングをカバー

：あなたは、しかし、イベントの委任を使用することができます。しかし、それだけではありません。また、jQueryプラグイン（カラーボックス）を初期化すると、それらを要素に委譲する方法がありません。あなたはAJAXコンテンツを読み込んだときにそれらの行を単に呼び出さなければなりません。あなたは（ページのロードにし、あなたのAJAXでsuccessコールバックを要求した）両方の場所で呼び出すことができます別の名前の関数にそれらを移動することです最も簡単な方法：

function initialiseColorbox() { 
    $(".iframe").colorbox({ 
     iframe: true, 
     width: "1000px", 
     height: "500px" 
    }); 
    $(".inline").colorbox({ 
     inline: true, 
     width: "50%" 
    }); 
    $(".callbacks").colorbox({ 
     onOpen: function() { 
      alert('onOpen: colorbox is about to open'); 
     }, 
     onLoad: function() { 
      alert('onLoad: colorbox has started to load the targeted content'); 
     }, 
     onComplete: function() { 
      alert('onComplete: colorbox has displayed the loaded content'); 
     }, 
     onCleanup: function() { 
      alert('onCleanup: colorbox has begun the close process'); 
     }, 
     onClosed: function() { 
      alert('onClosed: colorbox has completely closed'); 
     } 
    }); 
} 

Answer 2

です。 hoverイベントを設定すると、jQueryは現在そのページのイベントに対してイベントを設定しています。したがって、それらをajaxに置き換えると、新しいイベントであるため、イベントはそれらの要素に関連付けられません。あなたがそれらを再度バインドする関数を呼び出すことができますいずれか、またはあなたの代わりに

.on $（文書）を使用して、このanswerのように文書上のイベントハンドラを設定することができ、このイベントがオンに設定されているその方法を修正すること

ドキュメントと新しい要素は呼び出されたイベントを取得します。

Answer 3

あなたが検索した後、jQueryのAJAXの完全な機能を使用することができます私は私のために働いた解決策を見つけたことができたの前にアヤックス完全

Answer 4

  // EXAMPLE FOR JQUERY AJAX COMPLETE FUNC. 
      $.ajax({ 
      // get a form template first 
      url: "../FPFU/templates/yeni-workout-form.html", 
      type: "get", 
      success: function(data){ 
      // insert this template into your container 
       $(".content").html(data); 
      }, 
      error: function(){ 
       alert_fail.removeClass("gizle"); 
       alert_fail.addClass("goster"); 
       alert_fail.html("Template getirilemedi."); 
      }, 
      complete: function(){ 
       // after all done you can manupulate here your new content 
       // tinymce yükleme 
       tinymce.init({ 
        selector: '#workout-aciklama' 
       }); 
      } 

Answer 5

は同じ問題を抱えていた後に、データの形式はどこか、それは更新の要素が表示されます。 将来的に誰かがそれを打つことができ、私が見つけることができたすべての解決策がこれよりも少し複雑だったので、それが正しいかどうかを私に知らせてください。

Tamer Durgunによると、私たちはあなたのコードをajaxStopの中に入れて、イベントがajaxによって完了されるたびにあなたのコードを復活させます。

$(document).ajaxStop(function() { 

//your code 

} 

は私のために働いた:)