2017-06-28 7 views
2

Hy、テーブルの内容にJavaScriptを使用する際に問題があります。私の機能は、ユーザーが右クリックしたときにテーブル行に表示されるコンテキストメニューで、自分が何をしたいのかを選択できます。問題は、テーブルの次のページに移動するときに右クリックが機能しなくなることです(テーブル内の10レコードのページロード)。右クリックJavaScriptでPHPのテーブルで動作しません

マイスクリプト:このために使用

<script type='text/javascript'> 
$(window).load(function(){ 
(function ($, window) { 

    $.fn.contextMenu = function (settings) { 

     return this.each(function() { 

      // Open context menu 
      $(this).on("contextmenu", function (e) { 
       // return native menu if pressing control 
       if (e.ctrlKey) return; 

       //open menu 
       var $menu = $(settings.menuSelector) 
        .data("invokedOn", $(e.target)) 
        .show() 
        .css({ 
         position: "absolute", 
         left: getMenuPosition(e.clientX, 'width', 'scrollLeft'), 
         top: getMenuPosition(e.clientY, 'height', 'scrollTop') 
        }) 
        .off('click') 
        .on('click', 'a', function (e) { 
         $menu.hide(); 

         var $invokedOn = $menu.data("invokedOn"); 
         var $selectedMenu = $(e.target);       
         var $selectedFileId = $menu.data("invokedOn").find('.datatable_fixed_column').attr('id');       
         settings.menuSelected.call(this, $invokedOn, $selectedMenu, $selectedFileId); 
        }); 

       return false; 
      });      
      //make sure menu closes on any click 
      $('body').click(function() { 
       $(settings.menuSelector).hide(); 
      }); 
     }); 

     function getMenuPosition(mouse, direction, scrollDir) { 
      var win = $(window)[direction](), 
       scroll = $(window)[scrollDir](), 
       menu = $(settings.menuSelector)[direction](), 
       position = mouse + scroll; 

      // opening menu would pass the side of the page 
      if (mouse + menu > win && menu < mouse) 
       position -= menu; 

      return position; 
     }  

    }; 
})(jQuery, window); 

$("#datatable_fixed_column td").contextMenu({ 
    menuSelector: "#contextMenu", 
    menuSelected: function (invokedOn, selectedMenu, id) { 
     switch(selectedMenu.text()){ 
     case 'Modificare':{ 
      var rand = invokedOn.parent().children(); 
      var idpost = $(rand[0]).text(); 
      window.location.href = "organigrama_add.php?control=update&id=" + idpost;  
     } 
     break; 
     case 'Stergere':{ 
      var rand = invokedOn.parent().children(); 
      var marca = $(rand[1]).text(); 
      if (marca == '0') 
      { 
       var idpost = $(rand[0]).text(); 
       var departament = $(rand[5]).text(); 
       var subdepartament = $(rand[6]).text(); 
       var schimb = $(rand[9]).text(); 
       var functie = $(rand[10]).text();  
       var msg = "Sunteti sigur ca doriti sa stergeti aceasta inregistrare?" + "\nDepartament: " + departament + "\nSubdepartament: " + subdepartament + "\nSchimb: " + schimb + "\nFunctie: " + functie; 
       var confirmare = confirm(msg); 
       if (confirmare == true) 
       { 
        window.location.href = "organigrama.php?control=delete&id=" + idpost; 
       } 
      } 
      else 
      { 
       var msg = "Nu se poate sterge acest post. Doar posturile libere se pot sterge."; 
       alert(msg); 
      }   
     } 
     break; 
     case 'Renunta':{ 
      return false; 
     } 
     break; 
     } 
    } 
}); 
}); 
      </script> 

し、コンテキストメニュー:

<ul id="contextMenu" class="dropdown-menu" role="menu" style="display:none" > 
     <li><a tabindex="-1">Modificare</a></li> 
     <li><a tabindex="-1" href="#">Stergere</a></li> 
     <li class="divider"></li> 
     <li><a tabindex="-1" href="">Renunt</a></li> 
    </ul> 

編集:私は</body>終了タグとコンテキストメニューが<body>開始した後で前のjavascriptがあることを言及するのを忘れてタグ。

+0

ことだろう次のページをクリックするとブラウザがリロードされます。またはそうでない場合は、別の方法でcontextMenuバインディングを行う必要があります –

+0

テーブルの次のページをクリックしてオプションをクリックすると、それは良くありません。最初のページが再び読み込まれます。そして、10レコードから100レコードに変更した場合、JavaScriptは最初の10レコードだけで動作します。 contextMenuを他の方法でバインドするにはどうすればよいですか? –

+0

あなたはこのようなことをする必要があります。 '$(document).on( 'contextmenu'、target、function)' –

答えて

3

基本的にここでの問題は、テーブルの新しく追加された行が、ページの最初の読み込みからバインディングを取得しないことです。ので、ここで必要な修正が、これはjqueryのは、対象の要素に特定の機能を実行できるようになります。この

$(document).on('contextmenu', target, function) 

を使用してメイン文書にイベントをバインドするためには「右クリック/コンテキストメニュー」イベントに

関連する問題