jqueryでajaxをロードしたコンテンツにイベントをバインドする

Question

ajaxがロードされているタブがいくつかあります。私はHTMLを介してコンテンツを取得し、ページに挿入します。難しいのは、新しいコンテンツをajaxでロードするときに、新しいコンテンツの他のイベントをリッスンし、新しいコンテンツに対して他のタスクを実行する必要があることです。私は、私はロジックを説明させてマークアップを提供しておりません

var Course = { 

    config: { 
     page: 'description' 
    } 

    init: function() { 
     $('a.show-details').on('click', this.loadCourse); 
    }, 

    loadCourse: function() { 
     var courseId = $(this).parent().data('course_id'), 
      item_content = $(this).parents('div.item').children(), 
      path = 'main/ajaxjson/load_course_details'; 

     if ($(this).parents('h1.more').hasClass('current')) { 
      $(this).parents('h1.more').removeClass('current'); 
     } else { 
      $(this).parents('h1.more').addClass('current'); 
     } 
     $(item_content[2]).slideToggle(); 
     Course.doAjax(courseId, path); 
    }, 


    doAjax: function(courseId, path) { 
     $.ajax({ 
      type: 'POST', 
      url: ROOT_PATH + path, 
      data: {page : Course.config.page, course_id: courseId}, 
      success: function(result){ 
       $('#ajax-content-' + courseId).hide(); 
       $('#ajax-content-' + courseId).empty().append(result); 
       $('#ajax-content-' + courseId).show(); 

       // bind events here? call other methods like Couse.methodName()? 
      } 
     }); 
    } 
}` 

： は、ここに私のオブジェクトです。私はコースオブジェクトを初期化し、クリックすると、コースを取得するためのajaxリクエストを発し、コースの内容をslideToggleにリンクします。今、私はロードされたHTMLコンテンツを返します。 htmlには、ボタンやその他のアイテムがあります。私は新しいメソッドbindEventsを作成し、そこにイベントをバインドしますか？すべてのAjaxコールを再バインドする必要がありますか？

Answer 1

動的に追加されないDOMツリーの上にある要素にイベントリスナーを追加する必要があります。 jQueryのlive（）を使用してボディに追加することはできますが、使用することをお勧めしますdelegate

たとえば、.show-detailsリンクが#main要素内にある場合、

$('#main').delegate('.show-details', 'click', this.loadCourse); 

編集：あなたが使用する必要があります1.7以上のjQueryを使用している場合：

$('#main').on('click', '.show-details', this.loadCourse);