如何从按钮上循环获取id

Question

我的浏览器显示这样的消息，因为我正在使用 onclick 函数 () 关闭按钮。还有其他解决办法吗？？

错误处理响应：类型错误：self.processResponse 不是函数在 chrome-extension://cmkdbmfndkfgebldhnkbfhlneefdaaip/js/notification.js:154:10

我的代码 html 有一些 blade 从 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代码。从剪裁中获取 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.');
                        }
                    }
                })
            }

        })
    }

Answer 1

您的错误不是来自您的代码，而是来自名为“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>

如何从按钮上循环获取id

how to get id from looping on button

javascript

jquery

datatables

laravel