Select 使用 JavaScript 的锚标记，使用 PHP 和获取 ZDB97442387183ACE1DE46D 在 DOM 中动态呈现

Question

I'm trying to get the element (anchor tag using class name) using JavaScript which is rendered in the DOM dynamically using PHP and Fetch API. 但我无法做到这一点。 我尝试了很多方法，但不幸的是没有使用任何方法。 但是当我在 jQuery 中做同样的事情时，我可以很容易地通过使用这个来获得元素......

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

});

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

这是我的索引。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通过其锚点 class 附加事件并获取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);
  }
});