Question

我一直是stackoverflow的忠实粉丝（这让我在这里问问题而不是其他任何地方），无论如何，没有进一步的... 在创建商店系统时，我计划实施ajax，即可快速购买商品。现在，这是检索项目的循环：

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

然而，我的ajax似乎行为非常奇怪。我的实现是显示加载gif图像。脚本：

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

问题是，点击时只有一个按钮显示圆圈。脚本的位置是否会导致这种情况？任何帮助表示赞赏。

Answer 1

您只能拥有一个具有给定ID的项目。当你有多个具有相同id的元素时，返回哪一个是不确定的，但它通常只是第一个项目。

如果你想要多个购买按钮并希望为它们分配所有相同的jQuery事件处理程序，那么使用一个公共类名而不是一个id。

如果要动态加载内容并且希望事件处理程序适用于该内容，则需要使用委派事件处理。

在jQuery中，通常使用.on()或.delegate()来完成。基本的想法是你选择一个没有动态加载的静态父对象（也许是show_main的父对象）并将事件绑定到该对象，然后像这样传递动态元素的选择器（注意，我已经改变了id到类以识别购买按钮）：

$(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;/>');
})

Answer 2

两件事：

从示例中很难说，但是是否有一个迭代器可以创建可用项列表？如果是这样，您不应该使用唯一的ID。如果真的只有一个#buy，那么你很好。
使用Ajax更新内容时，您将失去绑定。假设与#buy按钮相关的项目被其他项目替换，您最好使用委派活动：

// not in an inline script, but just once, ideally in your main JS file
$(document).ready(function() {
  $('#wrapper').on('click', '#buy', (function(){
    var quantity = $('#itemquantity').val();
    $('#buy_status').html('<img src = "http://www.antibodyresource.com/theme/js/ajax-loader.gif" height = 20px;/>');
  });
})

其中#wrapper是DOM树中的一些祖先，它永远不会被Ajax事件破坏。

Answer 3

id是唯一值 - 在html页面上，每个id必须具有唯一值。改为使用类。

Answer 4

您需要将代码放在$(document).ready()中。所以它：

$(document).ready( function() {
    $('#buy').click( function(){
         // do something here
    });
});

另外，您可能希望列出jfriend00对ID的建议。

执行ajax时出错

4 个答案: