jquery ne fonctionne pas après ajax call.asp .net mvc3 (Razor)

Question

Je fais un post pour obtenir une vue partielle en utilisant ajax suit est le code que j'utilise pour rendre la vue partielle dans un div appelé 'DivSearchGrid' .

<script type ="text/javascript" > 
     $('#Retrieve').click(function() { 
      $('form').get(0).setAttribute('action', 'Search'); 
      //      $('form').submit(); 
      var formSubmit = $('form'); 
      var datTab; 
      $.ajax({ 
       url: "/AuthorityGrid/Search", 
       type: "POST", 
       data: formSubmit.serialize(), 
       success: function (data) { 
        datTab = data; 
       }, 
       complete: function() { 
        $('#DivSearchGrid').html(datTab); 

       } 

      }) 
      return false; 
     }); 
    </script> 

La méthode d'action dans le contrôleur renvoie une grille avec de nouvelles valeurs. mon problème est que, après que l'appel ajx soit terminé, les autres événements jquery dans ma page cessent de fonctionner. Le code de certains événements est le suivant.

<script type="text/javascript"> 

     $(function() { 
      //$('th[scope|="col"]').resizable(); 
      $("#resultGrid > tbody").selectable({ 
       selected: function (event, ui) { 
        if (ui.selected.cells != null) { 
         var strAmount = ui.selected.cells(6).innerText; 
         var Amount = strAmount.replace(/,/gi, ""); 
         var keyValue = "AuthorityLevel1=" + ui.selected.cells(11).innerText + ",AuthorityLevel2=" + ui.selected.cells(12).innerText + ",TcmAccount=" + ui.selected.cells(2).innerText + ",TcmType=" + ui.selected.cells(10).innerText + ",Rating=" + ui.selected.cells(5).innerText + ",Amount=" + Amount + ",AuthorityGridKey=" + ui.selected.cells(9).innerText + ",CagName=" + ui.selected.cells(3).innerText 
         var keyValModify = ui.selected.cells(11).innerText + "," + ui.selected.cells(10).innerText + "," + ui.selected.cells(12).innerText + "," + ui.selected.cells(5).innerText + "," + ui.selected.cells(2).innerText + "," + Amount + "," + ui.selected.cells(3).innerText + "," + ui.selected.cells(9).innerText 
         $('#CancelViewParam').val(keyValue); 
         $('#ModifyViewParam').val(keyValModify); 

        } 
       } 
      }); 
     }); 
    </script> 

Cette fonction sélectionne une ligne de la grille et place les valeurs sélectionnées dans un champ masqué.

Une fonction d'ouverture de fenêtres contextuelles ne fonctionne pas non plus après le code d'appel ajax pour cette fonction. Toutes ces fonctions fonctionnent parfaitement bien avant l'appel ajx, mais toutes cessent de fonctionner après l'appel, quelqu'un peut-il aider? Je n'utilise pas webforms, j'utilise asp.net mvc3 (rasoir)

Answer 1

Je suppose que le code qui ne fonctionne plus ne reçoit pas d'appel après l'appel ajax? Il semble probable que votre code fonctionne encore, mais n'est plus déclenché. Au fur et à mesure que le contenu de la grille de données change, vos gestionnaires/événements/... ajoutés ne seront plus liés à aucun objet.

Avez-vous essayé d'exécuter de nouveau le code une fois l'appel ajax terminé, afin que les gestionnaires/événements/... soient liés au nouveau contenu?

Aussi: le code .live() est la seule partie qui devrait toujours fonctionner, en théorie. Cependant, live est une fonction obsolète. Les suggestions sont d'utiliser .delegate() avant jQuery 1.7 ou .on() après jQuery 1.7