Question

I have been a really big fan of stackoverflow(which led me to ask the question here and not anywhere else), anyway, without further ado…
While creating a shop system, I planned to implement an ajax which buys the item on the fly. Now This is how the loop for retrieving items looks like:

    <?php
                    $shop_query = mysql_query("SELECT * FROM sector0_item WHERE 1");
                    $numrows = mysql_num_rows($shop_query);
                    While ($shop_fetch = mysql_fetch_array($shop_query)){

                ?>
                    <div id="shop_main">
                        <div class = 'item_img'>
                            <a><img src = "http://images.wikia.com/dofus/images/4/4e/Discovery_Potion.png" height = '100px'/></a>
                        </div>

                        <div class="item_buy">
                            <a><center>Price: <?php echo number_format($shop_fetch['item_price']);?></center><br /></a>
                            <a>Quantity: <input type = 'text' size = '9' id = 'itemquantity'/><br /></a>
                            <a><p>Point requirement: <?php echo number_format($shop_fetch['item_pt_req']);?></p></a>
                            <a><input type = 'button' id = 'buy' value = 'buy'/></a><span id = 'buy_status'></span>

                        </div>
                            <a><h3><?php echo $shop_fetch['item_name'];?></h3></a>
                            <a><p><?php echo $shop_fetch['item_desc'];?></p></a>
                            <a>Item Type: <font color = 'green'><?php echo $shop_fetch['item_class'];?></font></a>
                    </div>
                    <br />
                <?php
                    }
                ?>

However, my ajax seems to act really weird. My implementation was to show a loading gif image.
Script:

                        <script type = 'text/javascript'>
                                $('#buy').click (function(){
                                    var quantity = $('#itemquantity').val();
                                    $('#buy_status').html('<img src = "http://www.antibodyresource.com/theme/js/ajax-loader.gif" height = 20px;/>');

                                });
                            </script>

The problem is, Only one button shows the circle when clicked. Does the position of the script cause this? Any help is appreciated.

Answer 1

You can only have one item with a given id. When you have multiple elements with the same id, it is indeterminate which one will be returned, but it will usually be the first item only.

If you want multiple buy buttons and want to assign them all the same jQuery event handler, then use a common class name instead of an id.

---

If you are loading content dynamically and you want event handlers to work for that content, then you need to use delegated event handling.

In jQuery, that is generally done with either .on() or .delegate(). The basic idea is that you pick a static parent object that is not dynamically loaded (perhaps the parent of show_main) and bind the event to that object and then pass the selector of the dynamic element like this (note, I’ve changed from an id to a class to identify the buy button):

$(staticParentSelector).on('click', '.buyButton', function() {
    $(this).closest(".item_buy").find(".buy_status").html('<img src = "http://www.antibodyresource.com/theme/js/ajax-loader.gif" height = 20px;/>');
})