ページネーションのクリックイベントは一度だけ実行されます

Question

私はajaxページネーションを有効にしたWebgridを持っていますので、基本的にそのwebgridにはチェックボックスを選択してページングリンクを使用して2ページ目にナビゲートしようとするとき、次のページに移動すると、チェックボックスの選択内容が失われることをユーザーに警告するために、ページ設定リンクの機能をクリックします。 しかし、問題はクリック機能が実行されてから1回だけ実行されることです。

<div id="gridDiv"> 
     @{ 
      var grid = new WebGrid(Model, rowsPerPage: 5, canPage: true, canSort: true, ajaxUpdateContainerId: "gridDiv"); 
      @grid.GetHtml(); 
     } 
</div> 

と改ページのクリック機能コード

$("table tr a").on('click', function() { 
    if (confirm("Your checkbox selection will be lost. Do you want to continue?")) 
     return true; 
    else 
     return false; 
}) 

それは、このクリック機能を実行していないユーザーが、2番目の時間を警告初めてだから、ページのロード：ここに は私のWebGridのコードです。 私もデバッガを配置しました。その場合でも、私は一度だけデバッグすることができます。 私を助けてください。

Answer 1

イベントを登録する方法は、セレクタ（table tr a）に一致する要素をページでチェックし、その要素のclickイベントに関数を追加することです。ページを設定すると、それらの要素はDOMから削除され、新しいものに置き換えられ、コードはそれらの新しい要素にイベントハンドラを登録するために再度実行されません。

DOMを変更するたびにこのコードを再実行する心配がないので、イベントハンドラが2回以上追加される可能性があります。 $(document).on()を使用すると、イベントのバブリングを利用して、クリックされた要素に基づいて正しいイベントを使用できます。

あなたのコードはなる：

$('body').on('click', "table tr a", function() { 
    if (confirm("Your checkbox selection will be lost. Do you want to continue?")) 
     return true; 
    else 
     return false; 
}) 

リスナーは文書されるようになりましたし、追加されます任意の要素は、イベントがトリガされます。

Answer 2

私もそれを試しましたが、まだ動作していません。 @Schleisは動的に追加されたコンテンツの後にjavascriptがイベントバインディングを失うと述べています。私はAjaxStop関数でそのイベントを再バインドしています。

コード： -

$(document).ready(function() { 
     $(document).ajaxStart(function() { 
      $("#loader").show(); 
     }).ajaxStop(function() { 
      $("#loader").hide(); 
      conf(); 
     }) 
     // var a = setInterval(conf, 2000); 

     conf(); 
    }) 


    function conf() 
    { 
     $("table tr a").click(function() { 
      if (confirm("Your checkbox selection will be lost. Do you want to continue?")) 
       return true; 
      else 
       return false; 
     }) 
     //  alert("hi"); 
    }