访问使用 AJAX 注入的 html 元素的属性

Question

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

<?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 脚本。

我使用事件委托来访问按钮，但之后我不知道如何访问按钮的 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
});

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

可能会有比这更优雅的方法来解决问题，但同时我想了解如何访问 AJAX 注入的 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>

Answer 2

这段代码有一些问题，您通常希望对重复的元素使用类，例如在您的 php 中的 while 循环中：

...

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

那么你应该能够使用这样的事件来访问元素：

$('#content .edit').on('click', function() {
    var id = $(this).attr("value");

    alert( id );
});

Answer 3

你错过了“。”在“属性”之前？

var id = $('#content').children('#edit')attr("value"); 

您正在尝试通过循环创建多个具有相同 ID 的项目。这就是为什么 ajax 无法检测到您想要的正确项目的原因。尝试使用唯一标识符（如项目 ID）添加它。