1

我一直是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>

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

4

4 回答 4

5

您只能拥有一个具有给定 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;/>');
})
于 2012-04-06T05:33:38.753 回答
1

两件事情：

  1. 从示例中很难看出，但是否有一个迭代器可以创建可用项目的列表？如果是这样，您不应该使用唯一的 ID。如果真的只有一个#buy，那么你很好，不过。

  2. 当使用 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;/>');
  });
})

#wrapperAjax 事件永远不会破坏的 DOM 树中更高的祖先在哪里？

于 2012-04-06T05:36:31.333 回答
0

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

于 2012-04-06T05:34:36.490 回答
0

您需要将代码放入$(document).ready(). 所以这是：

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

此外，您可能希望列出 jfriend00 关于 ID 的建议。

于 2012-04-06T05:39:45.407 回答