使用 JavaScript 选择锚标记，它使用 PHP 和 Fetch API 在 DOM

Question

我正在尝试使用 JavaScript 获取元素（使用类名的锚标记），JavaScript 是使用 PHP 和 Fetch API 在 DOM 中动态呈现的。但我无法做到这一点。我尝试了很多方法，但不幸的是没有使用任何方法。但是当我在 jQuery 中做同样的事情时，我可以很容易地通过使用这个来获取元素......

$(document).on('click', '.delBtn', function(){

});

但我想用 JavaScript 做同样的事情。

这是我的 index.php 编码

<div class="col-lg-7">

    <div class="card">

      <div class="card-header lead">All Users</div>

      <div class="card-body pre-scrollable" style="max-height: 352px !important;">

        <table class="table table-striped">

          <thead class="thead-dark">

            <tr>

              <th>#</th>

              <th>Name</th>

              <th>Email</th>

              <th>Phone</th>

              <th>Action</th>

            </tr>

          </thead>

          <tbody id="showUsers">

          </tbody>

        </table>

      </div>

    </div>

  </div>

这是我的 script.js 编码

  const showUsers = document.getElementById('showUsers');

  async function readData() {

    const response = await fetch('action.php?read=1', {

      method: 'GET'

    });

    const data = await response.text();

    showUsers.innerHTML = data;

  }

  readData();

这是我发送 html 数据的 php 编码

if (isset($_GET['read'])) {

    $data = $user->read();

    $output = '';

    if ($data) {

      foreach ($data as $row) {

        $output .= '<tr>

                      <td>' . $row['id'] . '</td>

                      <td>' . $row['first_name'] . '</td>

                      <td>' . $row['email'] . '</td>

                      <td>' . $row['phone'] . '</td>

                      <td>

                        <a href="#" id="' . $row['id'] . '" class="badge badge-primary badge-pill editLink">Edit</a>

                        

                        <a href="#" id="' . $row['id'] . '" class="badge badge-danger badge-pill deleteLink">Del</a>

                      </td>

                    </tr>';

      }

      echo $output;

    }

  }

现在，当我使用 JavaScript 单击删除锚标记时，我需要 id 属性的值。

Answer 1

addEventListener您可以通过其锚类附加事件并获取id属性const elems = document.getElementsByClassName('delBtn');for(let ele of elems) {&nbsp; ele.addEventListener('click', onDeleteCliked);}function onDeleteCliked(event) {&nbsp; console.log('id', event.target.id);}<button class="delBtn" id="1">Delete Button</button>在添加动态事件处理程序的同时，你只需要添加下面这行代码document.addEventListener('click',function(e){&nbsp; &nbsp;if(e.target && e.target.classList.value.indexOf('delBtn') !== -1) {&nbsp; &nbsp; &nbsp;ele.addEventListener('click', onDeleteCliked);&nbsp; }});