Laravel: Jquery на вопрос функции щелчка

Question

Я пытаюсь alert что-то, но при нажатии функция running only once на первой кнопке. но у меня есть buttons on many rows.

Я получаю данные через Laravel из базы данных в таблице. Функция запускается только одной кнопкой, тогда с другими кнопками ничего не происходит.

Jquery:

jQuery(document).ready(function(e)  {
    $('#restore-data').on('click', function(e) {
    var val = $("#thisr").attr('value');
    alert(val);

    });
});

Просмотр:

<table id="recover-table" class="table" >
    <thead>
    <tr class="bg-info">
        <th>Teacher Name</th>
        <th>Date</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>

    @foreach($trashs as $trash)

    <tr id="thisr" value="{{$trash->id}}">
    <td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>

    <td class="text-nowrap ">{{$trash->deleted_at}}</td>

    <td class="text-nowrap "><button type="submit"  class="" name="id" 
    value="{{$trash->id}}" id="restore-data">Delete</button></td>

    </tr>

    @endforeach </tbody></table>

В настоящее время даже предупреждение не работает, но я хочу, чтобы обновить таблицу после удаления записи из таблицы.

Обновление: Теперь оповещение работает нормально, но когда яудалить запись нажатием кнопки, удаляется только одна строка. функция запускается один раз.

Complete Js:

jQuery(document).ready(function(e)  {

    $('#restore-data').on('click', function(e) {

    let teacher_id=$(this).attr('value');
    console.log('Restore button clicked!')
    e.preventDefault();

    $.ajax(
    {
      url: "/teachers/recover/" + $('#restore-data').attr("value"),
      type: 'GET', // Just delete Latter Capital Is Working Fine
      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
      data: teacher_id,

     success: function (data) {
     console.log(data.msg);
     console.log(teacher_id);

     if(data.msg){
         $('#thisr').remove();
         $('#response').empty();
         $(".toast").toast('show');
         $('#response').append(data.msg);
      }
    },
    error: function (xhr) {
    console.log("Error Restoring Record");
    //console.log(xhr.responseText);
    },
   });
  });
});

Answer 1

Вы можете попробовать использовать класс 'restore-data'

$(document).ready(function(e)  {
    $(document).on('click', '.restore-data', function(e) {
        var val = $('#thisr').val();
        alert(val);
    });
});

Поскольку идентификатор должен быть уникальным для каждого элемента.

Вы можете попробовать что-то вроде

@foreach($trashs as $trash)

<tr>
<td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>

<td class="text-nowrap ">{{$trash->deleted_at}}</td>

<td class="text-nowrap ">
    <button type="button" data-trash-id="{{$trash->id}}" class="restore-data">Delete</button>
</td>

</tr>

@endforeach

и JS as

$(document).on('click', '.restore-data', function(e) {
    var trash_id = $(this).attr('data-trash-id');
    alert(trash_id);
});

Answer 2

Измените эту строку.

var val = $("#thisr").attr('value');

на (поскольку у вас есть атрибут значения в кнопке):

var val = $(this).attr('value');

или (поскольку у вас есть атрибут значения td):

var val = $(this).parent('tr#thisr').attr('value')

Чтобы удалить строку.

$('#restore-data').on('click', function(e) {

 var _this = $(this);
 ...

if(data.msg){
  _this.parent('tr#thisr').remove();
....

Также измените тип кнопки на кнопку.

<button type="button"  class="" name="id" 
    value="{{$trash->id}}" id="restore-data">Delete</button></td>

Answer 3

Вы дали одинаковые id всем кнопкам, и идентификатор должен быть уникальным для конкретной кнопки, чтобы вы могли определить уникальный идентификатор с помощью ключа массива и передать его в функцию

@foreach($trashs as $key=>$trash)

<tr id="thisr{{$key}}">
    <td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>
    <td class="text-nowrap ">{{$trash->deleted_at}}</td>
    <td class="text-nowrap ">
        <button type="button"  class="" name="id" value="{{$trash->id}}" id="restore-data{{$key}}" onclick="restoreData({{$key}})">Delete</button>
    </td>
</tr>
@endforeach

function restoreData(key){
    var val = $("#restore-data"+key).attr('value');
    alert(val);
    // you can use either
    $("#restore-data"+key).closest('tr').remove();
    // OR
    $('#thisr'+key).remove();
}