определить нажатие кнопки jquery в строках php

Question

У меня есть кнопка ввода в:

while ($row = $result->fetch()) {
echo '<table class="cart-row" cellspacing="0" cellpadding="0" width="100%">';
echo '<tbody>';
echo '<tr>';
echo '<td width="75"><img border="0" width="59px" height="78px" title="" alt="" src=' . $row["ImagePath"] .'></td>';
echo '<td width="203"><span id="itemName" class="itemElements">'. $row["Name"] .'</span></td>';
echo '<td width="135"><span id="qtyNum">('. $row["Qty"] .')</span> <br />';
echo '<span id="qtyRemoveLink"><input class="linkbtn" type="submit" id="btnRemove" value="Remove"></td>';                            
echo '<td width="180"><span id="orderStatus" class="itemElements">In Stock Usually dispatched within 24 hours</span></td>';
echo '<td width="175" id="itemPriceRow"><span id="itemPrice">€ '. $row["Price"] .'</span></td>';
echo '</tr>';
echo '</tbody>';
echo '</table>';
echo '<br>';                            
}  

Я пытаюсь использовать этот метод, чтобы вызвать событие при нажатии кнопки, однако событие вызывается только для первой кнопки, сгенерированной вПервый ряд.Я использую этот метод:

$(document).ready(function() {
                $('#btnRemove').click(function() {
                     alert("test");
                });
             });

Есть идеи, как я могу решить эту проблему?Я знаю, что в C # есть метод привязки данных к строке, однако в jQuery я не знаю, если он существует.Спасибо

Answer 1

Вы выбираете элемент для привязки обработчика события click к уникальному идентификатору. Когда вы выбираете по идентификатору, вам будет возвращен только первый соответствующий элемент, поскольку для того, чтобы быть действительным идентификатором, он должен быть уникальным.

Измените идентификатор на класс и измените ваш селектор на .btnRemove, и alert будет работать для всех кнопок.

echo '<span id="qtyRemoveLink"><input class="linkbtn" type="submit" id="btnRemove" value="Remove"></td>';  

Должен измениться на:

echo '<span id="qtyRemoveLink"><input class="linkbtn btnRemove" type="submit" value="Remove"></td>'; 

И

$('#btnRemove').click(function() {

Должен измениться на:

$('.btnRemove').click(function() {

Вот демоверсия: http://jsfiddle.net/rSyCw/

Вот отличный ответ на сайте относительно создания действительных идентификаторов HTML: Каковы допустимые значения атрибута id в HTML?

Answer 2

Используйте класс для кнопки, а не ID. Идентификаторы - это уникальный идентификатор (может быть только один с таким именем на всей странице), однако классы могут применяться к нескольким элементам. Итак ...

<input type="submit" id="btnRemove" />

Становится

<input type="submit" class="btnRemove" />

И, как таковой, ваш селектор изменится на .btnRemove.

И теперь, когда вы знаете, что идентификаторы должны быть уникальными, вы должны продолжить и перенастроить вывод для использования классов или использовать идентификаторы с добавленным уникальным идентификатором. например,

<?php
  while ($row = $result->fetch()){
?>
    <!-- Other HTML -->
    <input type="submit" id="btnSubmit_<?= $row['Unique_Column_Id']; ?>" ... />

Затем вы можете изменить свой селектор:

$('[id^="btnSubmit_"]').click(...); // All elements with an
                                    // ID that starts with "btnSubmit_"

Answer 3

Один красный флаг здесь означает, что вы генерируете несколько элементов с одинаковым идентификатором на каждой итерации цикла.Идентификаторы элементов должны быть уникальными в вашем документе.Я предполагаю, что jQuery привязывается только к первому элементу, который он находит с идентификатором "btnRemove", потому что он предполагает, что ваши идентификаторы уникальны.

Как уже говорили другие, использование имени класса на вашей кнопке поможет вашемупроблема, но вы все равно должны придумать способ размещения уникальных идентификаторов в элементах itemName, qtyNum, qtyRemoveLink, orderStatus, itemPriceRow и itemPrice, а также в других местах, которые вы можете использоватьэта техника.