使用 jQuery 检测动态表的按钮单击包含动态按钮

Question

我使用php 和MySQL 动态生成了以下table。生成的行数和按钮数是动态的。

<?php
if($resultCheck != 0){
    while($result = mysqli_fetch_array($tableQueryExecute)){
      $normalShiftDuration = $result['shift1Duration'];
?>  
        <tr> <form method="post" id="vtagViewTwo">         
        <td name=""><select class="form-control" name="normalShiftOa" id="normalShiftOa"><option>1</option></select></td>
        <td>
            <input type="submit" class="btn btn-primary" name="editButton" id="editButton" value="Save">
        </td>
        </form></tr> 
<?php
        }
                
    }
?>

我想获得<td> 的值，即normalShiftOa 值，点击按钮使用jQuery click event，如下所示。

$("#editButton").click(function(){
    alert("Clicked");
}); 

但是由于每一行都有很多按钮生成相同的id，所以我无法做到。有谁知道该怎么做？我可以使用 php $_POST['editButton'] 方法来做到这一点。但我想用 jQuery 来做。

编辑 1

我将 id editButton 更改为 class 并尝试了以下操作。但它不起作用

$(".editButton").click(function(){
    alert($(this).$("#normalShiftOa").val());
}); 

Answer 1

使用类editButton，而不是使用ID。然后，如果要获取select 的值，请使用如下所示的 jQuery：

$(".editButton").click(function(){
  let tdValue = $(this).closest("form").find("select").val();
});

编辑：代码 sn-p 有效。

  
   $(".editButton").click(function(event){
      let tdValue = $(this).closest("form").find("select").val();
      alert(tdValue);
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr> <form method="post" id="vtagViewTwo">         
        <td name=""><select class="form-control" name="normalShiftOa" id="normalShiftOa"><option>1</option></select></td>
        <td>
            <input type="submit" class="editButton btn btn-primary" name="editButton" id="editButton" value="Save">
        </td>
        </form></tr>