jQueryはセカンダリページ（DataTables）で動作しません

Question

私は、2つのボタンで最後の列が埋め込まれた（DataTablesで作成された）シンプルなテーブルを持っています。これらのボタンはjqueryに接続されています。問題は次にある：私がテーブルの最初のページにいて、ボタンの1つを押すと、すべて正常に機能する。 2番目の/ 3番目の/ etcページの同じボタンを押すと、機能はもう働きません...なぜ私に説明できますか？私がこの問題に会うのは初めてです。ありがとうございました ！

ボタンは、ID（ほんの少しのノート）

EDIT、クラスでのjQueryをしませ呼び出す：

$('.generare_diploma').click(function(){    
        var user_id = $(this).attr('id').split('-'); 
        if(user_id[1] != ''){ 
         $.ajax ({ 
          url: "./genereaza.php", 
          type: "POST", 
          data: {user_id:user_id[1],todo:'generare_diploma_admin'}, 
          cache: false, 
          success: function(){ 
           $('#diploma-'+user_id[1]).attr('onclick',location.href = './genereaza.php?user_id='+user_id[1]+'&todo=download_diploma_admin'); 
          }, 
          error: function(xhr, status, error) { 
           var err = eval("(" + xhr.responseText + ")"); 
           alert(err.Message); 
          } 
         }); 
        } 
       }); 

そして、これは私のアンカーがどのように見えるかです：

<a id="diploma-'.$user['user_id'].'" class="btn btn-sm btn-success generare_diploma" data-toggle="tooltip" title="Genereaza diploma !"><i class="fa fa-calendar-check-o"></i></a> 

Answer 1

$(document).on('click', '.generare_diploma',function(){    
       var user_id = $(this).attr('id').split('-'); 
       if(user_id[1] != ''){ 
        $.ajax ({ 
         url: "./genereaza.php", 
         type: "POST", 
         data: {user_id:user_id[1],todo:'generare_diploma_admin'}, 
         cache: false, 
         success: function(){ 
          $('#diploma-'+user_id[1]).attr('onclick',location.href = './genereaza.php?user_id='+user_id[1]+'&todo=download_diploma_admin'); 
         }, 
         error: function(xhr, status, error) { 
          var err = eval("(" + xhr.responseText + ")"); 
          alert(err.Message); 
         } 
        }); 
       } 
      }); 

EDIT：jQueryはページ内の要素を認識していますそれが実行されると、DOMに追加された新しい要素はjQueryによって認識されません。この問題を解決するには、event delegationを使用して、jQueryがページの読み込みを実行したときにそこにあったDOM内のポイントまで新しく追加されたアイテムからのイベントをバブリングします。多くの人々はバブリングされたイベントをキャッチする場所としてdocumentを使用していますが、DOMツリー全体まで進む必要はありません。理想的にはyou should delegate to the nearest parent existing at the time of page load.

Answer 2

あなたがそれを初期化するときにまだdomにない要素に対して.clickイベントを使用します。

はつまり、あなたのDataTableまたは.on（

でリスナーを追加するには、新しい行を取得するたびにそのfonctionを初期化する必要があるため、最新のjQueryのバージョン.on（イベントは今、あなたの主な要素は、する必要があります。変更を持っていますあなたがfonctionを初期化するとき、あなたがたDataTable（あなたがたとえば、改ページとページを変更）を行うことがつもり新しい要素にリスナーを追加することができ、あなたのDOMに存在する

ので、あなたのコード：。$('.generare_diploma').click(function(){ がなければなりません。 $(document|'body'|selector).on('click','.generare_diploma',function(){

しかし、あなたは.onの前に.offを持っていたほうが良いでしょう。（例えば：$(document|'body'|selector).off('click','.generare_diploma').on('click','.generare_diploma',function(){