javascript - 访问使用 AJAX 注入(inject)的 html 元素的属性

Question

我正在创建一个使用 PHP 和 jQuery 在 MySQL 表上实现 CRUD 的小项目。表格以这种方式注入(inject)到布局中:

<?php

require '../connect.php';

$sql = "SELECT id, countryName, shortDesc FROM countries";
$result = mysqli_query($conn, $sql);

echo "<table>
          <tr>
              <th>Id</th>
              <th>Country</th>
              <th>Short description</th>
              <th>Actions</th>
          </tr>";

while ( $row = $result->fetch_assoc() ) {
        echo "<tr>
                  <td>".$row["id"]."</td>
                  <td>".$row["countryName"]."</td>
                  <td>".$row["shortDesc"]."</td>
                  <td>
                      <button id='show' value=".$row["id"].">Show</button>  
                      <button id='edit' value=".$row["id"].">Edit</button>    // value field added to pass id data
                      <button id='delete' value=".$row["id"].">Delete</button> 
                  </td>
              </tr>";
    }
    
echo "</table>";

$conn->close();
?>

我向按钮添加了值字段，因为我正在考虑使用此属性将行的 ID 传递给应该加载 EDIT 页面的 JS 脚本。

我使用事件委托(delegate)来访问按钮，但之后我不知道如何访问按钮的 value 属性。

在我的 jQuery 脚本文件中，我编写了这段代码来测试:

// EDIT
$('#content').on('click', '#edit', function() {       // EVENT DELEGATION
    // THIS DOESN'T WORK
    var id = $('#content').children('#edit').attr("value");       

    alert( id );    // RETURN UNDIFINED
});

我试图访问内容元素的一个属性并且它可以工作，所以问题应该是我不能像那样访问他的 child (以类似于使用 .on() 的偶数委托(delegate)的方式)。

可能会有比这更优雅的方法来解决问题，但同时我想了解如何访问 AJAX 注入(inject)的 HTML 元素的属性!

Answer 1

对于多个元素，您不能拥有相同的 id 将其更改为类，然后只需使用 $(this).attr("value") 来获取编辑按钮的值被点击。

演示代码:

$(document).on('click', '.edit', function() {
//get value
  var id = $(this).attr("value");
  console.log(id)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Id</th>
    <th>Country</th>
    <th>Short description</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td>1</td>
    <td>abc</td>
    <td>abc</td>
    <td>
    <!--added class-->
      <button class='show' value="1">Show</button>
      <button class='edit' value="1">Edit</button>
      <button class='delete' value="1">Delete</button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>ab2c</td>
    <td>ab2c</td>
    <td>
      <button class='show' value="2">Show</button>
      <button class='edit' value="2">Edit</button>
      <button class='delete' value="2">Delete</button>
    </td>
  </tr>
</table>