Supprimer la valeur de l'attribut ID_données

Question

Je suis nouveau sur javascript. J'essaye de supprimer la valeur avec le bouton data-id, mais la valeur data-id est toujours la première valeur sur ma table. Je clique sur le bouton avec l'ID de données de "5" mais en tant qu'ID, il est "1" (l'identifiant le plus haut) à chaque fois. Excusez mon anglais.

Mes codes de table:

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Category Name</th> 
      <th>Status</th> 
      <th>User</th> 
      <th>Management</th> 
     </tr> 
    </thead> 
    <tbody> 
     @foreach (var item in Model) 
     { 
      <tr> 
       <td><span class="label label-success">@item.ID</span></td> 
       <td>@item.CategoryName</td> 
       <td>@if (item.Status == true) 
        { 
         <b class="label label-success">Active</b> 
        } 
        else 
        { 
         <b class="label label-danger">Passive</b> 
        } 
        </td> 
       <td><a href="#">@item.User.Name</a></td> 
       <td> 
        <button class="btn btn-default btn-sm">Edit</button> 
        <button class="btn btn-default btn-sm" id="btn-Delete" onclick="DeleteCategory()" data-id="@item.ID">Delete</button> 
       </td> 
      </tr> 
     } 
    </tbody> 
</table> 

Mes codes javascript:

function DeleteCategory() { 
    var caughtID= $("#btn-Delete").attr("data-id"); 

    $.ajax({ 
     url: "/Category/Delete/" + caughtID, 
     type: "POST", 
     dataType: "json", 
     success: function (response) { 
      if (response.Success) { 
       bootbox.alert(response.Message, function() { 
        location.reload(); 
       }); 
      } 
      else { 
       bootbox.alert(response.Message, function() { 
        //it's null yet 
       }); 
      } 
     } 
    }) 
} 

Answer 1

Id doivent être uniques, mais dans votre cas sans id il peut aussi être réalisable, ce que vous voulez faire.

Change: -

onclick="DeleteCategory()" 

à: -

onclick="DeleteCategory(this)" 

Et puis: -

function DeleteCategory(ele) { 
var caughtID= $(ele).data("id"); 
.....rest code 

DEMO Exemple: -

function DeleteCategory(ele){ 
 
    alert($(ele).data('id')); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn btn-default btn-sm" id="btn-Delete" onclick="DeleteCategory(this)" data-id="1">Delete</button> 
 
<button class="btn btn-default btn-sm" id="btn-Delete" onclick="DeleteCategory(this)" data-id="2">Delete</button> 
 
<button class="btn btn-default btn-sm" id="btn-Delete" onclick="DeleteCategory(this)" data-id="3">Delete</button>

Une solution pure jQuery est: -

changement id="btn-Delete" à class ="btn-Delete" et enlever onclick comme ci-dessous: -

<button class="btn btn-default btn-sm btn-Delete" data-id="@item.ID">Delete</button> 

Et puis changer seulement cette ligne : -

var caughtID= $("#btn-Delete").attr("data-id"); 

à: -

var caughtID = $(this).data("id"); 

Answer 2

Comme Rory a commenté attributs id doit être unique!. Vous devez changer l'identifiant du bouton en classe et cliquer sur l'élément statique. Parce que le bouton est créé dynamiquement, il peut causer un problème auquel vous faites face.

<button class="btn btn-default btn-sm btn-Delete" data-id="@item.ID">Delete</button> 

$(document).ready(function() { 
$('table').on('click', '.btn-Delete', function(event) { 
    event.preventDefault(); 
    var caughtID = $(this).attr("data-id"); 
    $.ajax({ 
     url: "/Category/Delete/" + caughtID, 
     type: "POST", 
     dataType: "json", 
     success: function(response) { 
      if (response.Success) { 
       bootbox.alert(response.Message, function() { 
        location.reload(); 
       }); 
      } else { 
       bootbox.alert(response.Message, function() { 
        //it's null yet 
       }); 
      } 
     } 
    }) 
}); 
});