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

Question

我正在尝试使用 JavaScript 获取元素（使用 class 名称的锚标记），该元素使用 PHP 和 Fetch [在 DOM 中动态呈现=36=]。但我无法做到这一点。我尝试了很多方法，但不幸的是没有使用任何方法。但是当我在 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 通过其锚点 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);
  }
});

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

Select Anchor tag using JavaScript which is dynamically rendered in the DOM using PHP & Fetch API

javascript

async-await

ecmascript-6

fetch-api