jQueryの内容が変更されていないため、機能が初期化されません。

Question

サイドバーを持つ管理者用Webサイトを作成しています。サイドバーをクリックすると、ajaxリクエストを使用してメインコンテンツが変更され、成功した場合は$（ '＃page-wrapper'）が実行されます。たとえば、コンテンツのIDは「#content」です。 $（＃content）.dataTable（）;のような変更されたコンテンツに対して関数を実行できません。助けてください。

// Function to CALL Ajax 
rj.ajaxCall = function(options){ 
    // toSend url callbacks() callerror() 
    console.log('ajaxCall'); 
    $.ajax({ 
     type  : 'POST', 
     data  : options.toSend, 
     url   : options.url, 
     encode  : true, 
     replace  : true, 
     success  : function(data){options.callbacks(data);}, 
     error  : function(e){options.callerror(e);} 
    }); 
}; 

// function to change main content on click of side bar 
rj.sidebar = function(){ 
    console.log('sidebar'); 
    $(document).ready(function(){ 
     $('#side-menu li a').on('click',function(event){ 
      console.log('side bar clicked'); 
      event.preventDefault(); 
      var loc = $(this).attr('location'); 
      console.log(loc); 
      if(loc !== undefined && loc !== '#'){ 
       var request = { 
        toSend: {isCont:1}, 
        url:loc, 
        callbacks: function(d){rj.contChange(d,loc);}, 
        callerror: function(er){alert('Network Error. Please try again'); } 
       }; 
       rj.ajaxCall(request); 
      } 
     }); 
    }); 
}; 

//function to change the main content 
rj.contChange = function(cont,location){ 
    $('#page-wrapper').html(cont); 
    history.pushState({},{},location); 
}; 

// function to load DATA TABLE Js if content has id #dataTables-example 
rj.initDataTable = function(){ 
    console.log('LOAD DATA TABLE'); 
    $('#dataTables-example').DataTable({responsive: true}); 
}; 

// execute javascripts 
$(window).ready(function(){ 
    rj.initDataTable(); 
}); 

if ($('#wrapper').length > 0){ 

    rj.initDataTable(); 

    rj.sidebar(); 
} 

Answer 1

ajaxの成功後にrj.initDataTableを呼び出していません。試してみてください：

rj.contChange = function(cont,location){ 
    $('#page-wrapper').html(cont); 
    history.pushState({},{},location); 
    rj.initDataTable(); 
};