识别jQuery按钮单击PHP行

Question

I have an input button in :

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>';                            
}  

I'm trying to use this method to trigger an event when the button is clicked however the event is only being fired for the first button generated in the first row. I'm using this method:

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

Any ideas how I can fix this problem? I know in C# there is on row databound method however in jQuery I dont now if it exsists. Thanks

Answer 1

You are selecting an element to bind the click event handler to that has a unique ID. When you select by ID you will be returned only the first matching element because to be a valid ID it must be unique.

Change the ID to a class and change your selector to .btnRemove and the alert will work for all the buttons.

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

Should change to:

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

And:

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

Should change to:

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

Here is a demo: http://jsfiddle.net/rSyCw/

Here is an excellent answer on the site regarding the creation of valid HTML IDs: What are valid values for the id attribute in HTML?

Answer 2

Use a class for the button, not an ID. IDs are unique identifiers (can only be one with that name on the whole page), however classes may be applied to multiple elements. So...

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

Becomes

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

And, as such, your selector changes to .btnRemove .

And, now that you know that IDs need to be unique, you should go ahead and re-configure the output to use classes, or use IDs with a unique ID appended. eg

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

Then you can modify your selector:

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

Answer 3

One red flag here is that you are generating multiple elements with the same ID on each iteration of your loop. Element IDs need to be unique in your document. My guess is that jQuery is only binding to the first element it finds with the ID "btnRemove" because it assumes that your IDs are unique.

As others have stated, using a class name on your button would help your problem, but you should still come up with a way to put unique IDs on your itemName , qtyNum , qtyRemoveLink , orderStatus , itemPriceRow , and itemPrice elements, and anywhere else you might be using this technique.