Обнаружение нажатия кнопки в динамической c таблице содержит динамические c кнопки с jQuery - PullRequest
Новая
       4

Обнаружение нажатия кнопки в динамической c таблице содержит динамические c кнопки с jQuery

2 голосов
/ 26 февраля 2020

У меня есть следующие table, динамически генерируемые с использованием php и MySQL. Количество строк и количество генерируемых кнопок являются динамическими c. 

<?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

Я изменил идентификатор editButton на класс и попробовал следующее. Но это не работает 

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

1 Ответ

2 голосов
/ 26 февраля 2020

Вместо использования идентификаторов используйте класс editButton. Затем, если вы хотите получить значение select, используйте jQuery, как показано ниже: 

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

Редактировать: Фрагмент кода, который работает. 

  
   $(".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>
...