我只從jQuery獲得jQuery中的第一個id剃刀視圖

Question

我使用asp.net mvc和Razor。這是我的代碼

@foreach (var item in Model) 
    { 
       <button class="btn btn-danger btn-xs" id="deleteSystemData" data-toggle="modal" data-target="#deleteModal" data-id="@item.SerialNumber">Delete reported data</button> 
} 

<script> 
    window.onload = function() { 
     var serialNumber; 

     $('#deleteSystemData').click(function (e) { 
      e.preventDefault(); 
      serialNumber = $(this).data('id'); 
      console.log("This number: " + serialNumber); 
      $("#deleteModal #serial-number").text(serialNumber); 
     }); 

     $('#deleteConfirmed').click(function() { 
      $.ajax({ 
       url: '/MeterReading/DeleteSystemData', 
       data: { serialNumber: serialNumber } 
      }).done(function() { 
       $('#deleteModal').modal('toggle'); 
       $("#delete-system-data-success").slideDown(500) 
        .delay(2500) 
        .slideUp(500); 
      }).error(function() { 
       $('#deleteModal').modal('toggle'); 
       $("#delete-system-data-error").slideDown(500) 
        .delay(2500) 
        .slideUp(500); 
      } 
      ); 
     }); 

    } 
</script> 

我在所有的按鈕上得到了正確的data-id="@item.SerialNumber"。 但我的jQuery代碼僅適用於第一個按鈕。我在第一個點擊事件中添加了一個console.log（這個數字），當我點擊第一個按鈕時，我在日誌中得到一個Id，但其餘的在jQuery腳本中沒有任何Id。

我的目標是將一個id從一個按鈕傳遞給一個asp.net控制器，並刪除那個id。我也有一個bootstrap模式，但是這個工作正常。

Answer 1

你不應該有相同的ID（its ok to have it in plain HTML as it will not break any thing, but if you want to play with Jquery on these ids then its a Big NO!!!）如果你當你寫做，然後jQuery來選擇帶有標識的元素，則其將與給定的ID在DOM總是返回的第一個元素的多個元素從頁面頂部開始。

Solution:添加類的按鈕的ID代替，然後寫腳本這個類玩..

所以，將裏面的for循環如下

@foreach (var item in Model) 
{ 
    <button class="btn btn-danger btn-xs deleteSystemData" data-toggle="modal" data-target="#deleteModal" data-id="@item.SerialNumber">Delete reported data</button> 
    } 

注意HTMLI have removed the id and added it to the class

接下來將腳本部分更改爲以下

$('.deleteSystemData').click(function (e) { 
    e.preventDefault(); 
    serialNumber = $(this).data('id'); 
    console.log("This number: " + serialNumber); 
    $("#deleteModal #serial-number").text(serialNumber); 

}）;

注意我已經改變了選擇#deleteSystemData是.deleteSystemData

Answer 2

您正在創建無效的重複ID。嘗試改爲使用類名。

@var i = 0; 
@foreach (var item in Model) 
{ 
      <button class="btn btn-danger btn-xs deleteSystemData" id="deleteSystemData_@i" data-toggle="modal" data-target="#deleteModal" data-id="@item.SerialNumber">Delete reported data</button> 
@i++; 
} 

window.onload = function() { 
    var serialNumber; 

    $('.deleteSystemData').click(function (e) { 
     e.preventDefault(); 
     serialNumber = $(this).attr('data-id'); // Gets the serial number 
     console.log("This number: " + serialNumber); 
     $("#deleteModal #serial-number").text(serialNumber); 
    }); 
}