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?