如何從按鈕上的回圈中獲取id

我的瀏覽器顯示這樣的訊息，因為我正在使用 onclick 函式 () 關閉按鈕。有沒有其他解決辦法？？

錯誤處理回應：TypeError: self.processResponse is not a function at chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10

我的代碼 html 帶有一些從 laravel 回圈的刀片

<div class="table-responsive" id="gender">
    <table class="table" id="genders-table">
        <thead>
            <tr>
                <th>Jenis Kelamin</th>
                <th>Is Active</th>
                <th colspan="3">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($genders as $gender)
            <tr>
                <td>{{ $gender->jenis_kelamin }}</td>
                <td>{{ $gender->is_active }}</td>
                <td width="120">
                    <div class='btn-group'>
                        <a href="{{ route('genders.show', [$gender->id]) }}" class='btn btn-default btn-xs'>
                            <i class="far fa-eye"></i>
                        </a>
                        <a href="{{ route('genders.edit', [$gender->id]) }}" class='btn btn-default btn-xs'>
                            <i class="far fa-edit"></i>
                        </a>

                        <button class='hapus btn btn-danger btn-xs' id='hapus' onclick="hapus(<?= $gender->id  ?>)"><i class='far fa-trash-alt'></i></button>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

我的js代碼。從 lopping 中獲取 id 并進行 ajax 呼叫

function hapus(genderId) {
        bootbox.confirm("Do you really want to delete record?", function(result) {
            if (result) {
                $.ajax({
                    url: '{{ url("api/genders/") }}'   '/'   genderId,
                    dataType: "JSON",
                    type: "DELETE",
                    data: genderId,
                    success: function(data, textStatus, xhr, response) {
                        // alert(true === 1);
                        if (data.success == true) {

                            $('#gender').load(" #genders-table", function() {
                                alert("data berhasil di hapus")
                            })

                        } else {
                            bootbox.alert('Record not deleted.');
                        }
                    }
                })
            }

        })
    }

uj5u.com熱心網友回復：

您的錯誤不是來自您的代碼，而是來自名為“WhatRuns”的 Chrome 擴展程式

ID 也需要是唯一的，所以我強烈建議從容器委托點擊并使用 data-attribute 作為 id

document.querySelector("#genders-table tbody").addEventListener("click", function(e) {
  const tgt = e.target.closest(".hapus");
  if (tgt) {
    const genderId = tgt.dataset.genderid;
    console.log(genderId)
    bootbox.confirm("Do you really want to delete record?", function(result) {
      if (result) {
        $.ajax({
          url: '{{ url("api/genders/") }}'   '/'   genderId,
          dataType: "JSON",
          type: "DELETE",
          data: genderId,
          success: function(data, textStatus, xhr, response) {
            // alert(true === 1);
            if (data.success == true) {
              $('#gender').load(" #genders-table", function() {
                alert("data berhasil di hapus")
              })
            } else {
              bootbox.alert('Record not deleted.');
            }
          }
        })
      }
    })
  }
})

<div class="table-responsive" id="gender">
  <table class="table" id="genders-table">
    <thead>
      <tr>
        <th>Jenis Kelamin</th>
        <th>Is Active</th>
        <th colspan="3">Action</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td>Bla 1</td>
        <td>Bla 1.1</td>
        <td width="120">
          <div class='btn-group'>
            <a href="#" class='btn btn-default btn-xs'>
              <i class="far fa-eye"></i>
            </a>
            <a href="#" class='btn btn-default btn-xs'><i class="far fa-edit"></i></a>

            <button class='hapus btn btn-danger btn-xs'  data-genderid="<?= $gender->id  ?>"><i class='far fa-trash-alt'></i></button>
          </div>
        </td>
      </tr>

      <tr>
        <td>Bla 2</td>
        <td>Bla 2.1</td>
        <td width="120">
          <div class='btn-group'>
            <a href="#" class='btn btn-default btn-xs'>
              <i class="far fa-eye"></i>
            </a>
            <a href="#" class='btn btn-default btn-xs'>
              <i class="far fa-edit"></i>
            </a>

            <button class='hapus btn btn-danger btn-xs' data-genderid="<?= $gender->id  ?>"><i class='far fa-trash-alt'></i></button>
          </div>
        </td>
      </tr>

    </tbody>
  </table>
</div>

標籤：javascript 查询 拉拉维尔 数据表

上一篇：如何使用DiscordAPI使`CommandInteraction.reply()`回傳一個`Message`

下一篇：將javascripteval方法更改為另一種解決方案