jQueryのクリックイベントハンドラは、load（）のhtmlページを読み込んだ後に動作しません

Question

こんにちは、クリックされたリンクに応じてインデックスページに複数のHTMLページを読み込んでいます。クリックしたイベントハンドラそれは、jQueryがhtmlファイルをロードした後に、そのHTMLのリンクにclickイベントハンドラがバインドされていないようです。ここ は私のコードです：

これは動作しませんリンクのいずれかのHTMLです：

<a href="#" id="NavContactPage" data-sectionId="Skills">skills</a> 

これはそれでasocieted jqueryのコードです：

$("nav a , a.first_anchor , a#NavContactPage").click(function(){ 
    var id = $(this).attr("data-sectionId"); 
    var link = "load/" + id + ".html"; 

    $("div#Content").load(link , function(){ 
     $("section#" + id).fadeIn(); 
     if(id === "Portfolio"){ 
      $('div.slide').cycle('fade'); 
     } 
     if(id === "Home"){ 
      $("#jcycleslider").cycle({ 
       fx: mtransition, 
       easing: easing, 
       before: onBefore, 
       after: onAfter, 
       speed: mpace, 
       timeout: mnext, 
       sync: msync, 
       randomizeEffects:0, 
       pager:'#jslider_nav' 
      }) 
      $("#jslider_nav a").text(""); 
     }  
    })  
    return false; 
}) 

どのようにすることができますこの問題を解決します？私はそれを理解したよう

Answer 1

$("selector").click(...)にのみ表示jQueryのために一度にクエリをしたことを要素にclickイベントにコールバックを登録します。したがって、このセレクタに一致する新しく追加された要素の場合、コールバックは適用されません。

あなたはどちらか、再度、新たに追加された要素へのコールバックをregistrateする必要があります。また、使用する必要があります。

$(document).on('click',"nav a , a.first_anchor , a#NavContactPage", ...);

代わりのルートとしての文書を使用して、それは、例えば使用することをお勧めしますコンテンツをルートとしてロードしている要素。 $("div#Content").on(....);

Answer 2

、あなたは）（.onで委任を使用する必要があります。

$(document).on('click',"nav a , a.first_anchor , a#NavContactPage",function(){...} 

Answer 3

jqueryのurイベントをバインドする準備ができていますか？

イベントバインディングコードはinsideで、clickではなくonを使用する必要があります。私はそれがウルの問題を解決すべきだと思います。私は私のメインページにHTMLをインポートする.LOAD（）関数を使用していたとき

$(function(){ 

    // Bind event here 

}); 

Answer 4

はこの問題に出くわしました。私はこれを私の準備機能の中に入れてくれました。

$(document).on('click','#btninsertrequest',function(){ 
alert("yes"); 
});