dynamique cliquez ne fonctionne pas jquery MVC4

Question

J'ai une liste avec l'intégration de pagination.

Voici comment la liste est coming-

foreach(var item in Model) 
{ 

<tr id="rowitems-@item.Id"> 
    <td> 
     @Html.DisplayFor(modelItem => item.vendorName) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.vendor_Representative) 
    </td> 
    <td> 
     @Html.DisplayFor(modelItem => item.fixed_Line) 
     </td> 
     <td> 
     @Html.DisplayFor(modelItem => item.mobile_No) 
     </td> 
     <td> 
     @Html.DisplayFor(modelItem => item.fax_No) 
     </td> 
     <td> 
     @Html.DisplayFor(modelItem => item.emaiL) 
     </td> 
     <td> 
     @Html.DisplayFor(modelItem => item.addresS) 
     </td> 
     <td> 
     @Html.DisplayFor(modelItem => item.rep_Contact) 
     </td> 
     <td> 
     <span class="dropdown settings"> 
     <a href="javascript:;" class="btn btn-default btn-mini dropdown-toggle options" 
      data-toggle="dropdown"><i class="fa fa-cogs"></i></a> 
     <ul class="dropdown-menu arrow pull-right"> 
      <li> 
       <a href="javascript:;"><i class="fa fa-pencil"></i>&nbsp;Edit</a> 
      </li> 
      <li> 
       <a href="javascript:;" id="del-@item.Id"><i class="fa fa-lock"></i> 
       &nbsp;Delete 
       </a> 
      </li> 
      </ul> 

     </span> 
     </td> 
     </tr> 
    } 

Maintenant, je voulais supprimer la ligne de cette liste.

Pour la première page, cela fonctionne très bien et me récupère avec alerte avec un identifiant de la ligne en cours.

Mais dès que je clique sur la deuxième page de la pagination ci-dessous, la suppression de ligne ne déclenche pas l'ID de la ligne.

jQuery-

<script type="text/javascript"> 
    $(function() { 
     $(document).on('click', 'a[id^="del-@item.Id"]', function() { 
       var $this = $('a[id^="del-@item.Id"]'); 
       var id = $this.parent().parent().parent().parent().parent().attr('id'); 
       alert(id); 
       $.ajax({ 
        url: '/Vendors/DeactivateVendor/@item.Id', 
        type: 'POST', 
        success: function (data) { 
         if (data.success == true) { 
          $('#' + 'rowitems-@item.Id').remove(); 
          } 
         else { 
          window.location.href = "/UserAccount/Login/"; 
          } 
         } 

       }); 
      }); 
      }); 


    </script> 

Au-dessus jQuery ne fonctionne que pour la première page qui existait dans le document maintenant.

Comment créer une fonction de clic pour la liste dynamique à venir après la modification de document à la page suivante.

Le premier page-

Le deuxième page-

Answer 1

qui se passe parce que le code où vous lier l'événement aux lignes de la table seulement est en cours d'exécution lorsque la page externe est chargée, et non lorsque les vues partielles sont actualisées via ajax.

Le moyen le plus simple et le plus efficace de résoudre ce problème est le on de jQuery.

Vous devez avoir un élément statique sur la page que vous pouvez utiliser comme premier sélecteur, puis le connecter à l'intérieur de votre jQuery. Pour les besoins de cet exemple, je placerai votre table dans un <div id="tableWrapper"></div>, mais vous pouvez utiliser n'importe quel autre élément de la table qui fait partie de la vue principale. Je voudrais également ajouter une classe appelée "delItem" à vos balises d'ancrage de suppression.

$(document).ready(function() { 
    // Other stuff you need done. 
    $('#tableWrapper').on("click",".delItem", function() { 
     deleteItem(this); 
    }); 
}); 

var deleteItem(elem) { 
    var $this = $(elem); 
    // Continue on with your code to delete the item. 
}; 

EDIT AVEC DESCRIPTIONS SUPPLÉMENTAIRES DE CE QUI EST PASSE

Alors qu'est-ce qui se passe est que vos principales charges de vue une fois. Vraisemblablement, votre vue partielle est chargée la première fois dans le cadre de la réponse initiale au client.

Lorsque cette page est traitée par le navigateur, il accède à votre javascript où vous avez téléchargé $(document).ready(). Il commence à traiter le javascript et dit: «Ah, j'ai tous ces éléments 'a[id^="del-@item.Id"]', donc je vais leur relier cet événement

Mais quand vous allez à la page suivante, juste la vue partielle est rechargé via AJAX, donc le navigateur n'a pas besoin de tirer à nouveau le $(document).ready(), car le "document" n'a pas changé

C'est là que le jquery on() entre en jeu.Avec cette syntaxe, vous dites à jQuery de "chaque fois qu'un élément correspondant au sélecteur que je fournis (dans ce cas, .delItem) est ajouté au DOM, donnez-lui cette fonction sur l'événement auquel je le dis." Ainsi, jQuery analyse dynamiquement le DOM chaque fois qu'il y a une mise à jour du contenu pour rechercher les nouveaux éléments qui correspondent au sélecteur. C'est pourquoi cela fonctionne maintenant lorsque vous rechargez une partie du contenu via AJAX.

Answer 2

essayez ceci:

if (data.success == true) { 

$('#' + id).remove(); 

}