DOM要素を挿入した後、非イベントのjavascript命令を動作させる方法は？

Question

DOM要素（Ajaxレスポンスなど）を挿入した後にイベントを機能させるには、イベント委譲を使用する必要がありますが、基本的なJS命令はどうですか？

すべての指示は、影響を受けるPHPページで並べ替えられています（コードをより簡単に更新および改善し、同じ指示を何度も繰り返さないように）。 ここでは、あるクラスが存在するかどうかをテストしたいと思います。このクラスは、JSファイルがロードされても存在しませんが、AJAXレスポンスを挿入した後になります。

コード例

// NAVBAR.PHP 

if ($('.className').length) { 

$('.button-navbar').show(); }  

/* FOOTER.PHP 
.... */ 

// VIEW_NEWS.PHP 

$('.ajax_wrapper').on('click', '#view_news tr', function() { 

    var id = $(this).attr("id"); 
    var get_news_request = $.ajax({type: "GET", url: "view_news.php", data: {news_id: id}, dataType: "html"}); 

    get_news_request.done(function(html) { 

     $('.ajax_wrapper').hide('slide', {direction: 'right'}, function(){ 

      $('.ajax_wrapper').empty(); 
      $('.ajax_wrapper').hide().html(html); 
      $('.ajax_wrapper').show('slide'); 

     }); 

    }); 

    get_news_request.fail(function(jqXHR, textStatus, errorThrown) { 

     alert("Request failed: " + textStatus + " " + errorThrown); 
    }); 

}); 

クラスが今存在しているのに対し、残念ながら、

if ($('.className').length) { 

$('.button-navbar').show(); } 

は、実行されていないようです。

JSファイルアーキテクチャを壊さないソリューションがありますか？

Answer 1

このコードはイベントハンドラではなく、あらゆる種類の永久ルールは設定しません。これは単なる手続き型コードなので、自動的に再度呼び出される理由はありません。それが処刑されたとき、そのようなクラスにあった。クラスを追加しても、コードは再度実行されません。

ただし、手動で両方の場所（最初と、ajaxコールバック）でチェックを行うことができます。

function show_navbar_check() { 
    if ($('.className').length) 
     $('.button-navbar').show(); 
} 

show_navbar_check(); 

そしてあまりにAJAXコールバックでそれを呼び出す：重複を避けるために、あなたは、実際の関数への共有機能を置くことができます

$('.ajax_wrapper').on('click', '#view_news tr', function() { 

    var id = $(this).attr("id"); 
    var get_news_request = $.ajax({type: "GET", url: "view_news.php", data: {news_id: id}, dataType: "html"}); 

    get_news_request.done(function(html) { 

     $('.ajax_wrapper').hide('slide', {direction: 'right'}, function(){ 

      $('.ajax_wrapper').empty(); 
      $('.ajax_wrapper').hide().html(html); 
      $('.ajax_wrapper').show('slide'); 

      /* I added the line below */ 
      show_navbar_check(); 
     }); 

    }); 

    get_news_request.fail(function(jqXHR, textStatus, errorThrown) { 

     alert("Request failed: " + textStatus + " " + errorThrown); 
    }); 

}); 

追記：この問題に対する解決策もありますjQuery.live()を使用していましたが、効率的な理由から上記の方が良いと思っていたので、私はそれを含めませんでした。