使用 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) {

  ele.addEventListener('click', onDeleteCliked);

}

function onDeleteCliked(event) {

  console.log('id', event.target.id);

}

<button class="delBtn" id="1">Delete Button</button>

在添加动态事件处理程序的同时，你只需要添加下面这行代码

document.addEventListener('click',function(e){

   if(e.target && e.target.classList.value.indexOf('delBtn') !== -1) {

     ele.addEventListener('click', onDeleteCliked);

  }

});