ajax執行錯誤

我一直是一個非常大的粉絲stackoverflow（這導致我問這裏的問題，而不是其他任何地方），無論如何，沒有進一步的... 雖然創建一個商店系統，我計劃實施一個即時購買該項目的ajax。現在這是如何循環檢索項目看起來像：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 
        } 
       ?>

但是，我的阿賈克斯似乎行事真的很奇怪。我的實現是顯示一個加載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>

的問題是，只有一個按鈕會顯示單擊時圓。腳本的位置是否會導致這種情況？任何幫助表示讚賞。

來源

2012-04-06 Khalid Okiely

我沒有給你。「點擊時只有一個按鈕顯示圓圈」它的意思是什麼？ – chhameed 2012-04-06 05:32:38

@Hameed你打敗了我。 – Norse 2012-04-06 05:33:14

假設佈局具有以下項目 item_1（購買） item_2（購買）加載gif只出現在單擊第一個但不是第二個時出現。可能是因爲id。 – 2012-04-06 05:36:39

您只能有一個具有給定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-06 05:33:38 jfriend00

那麼，我試過這部分，並沒有真正的工作，也許是因爲我嘗試了onClick attrib。我遵循類的建議，但是，當我單擊任何按鈕時，整組按鈕都顯示加載圖像。雖然不影響與數據庫的交互。我改變了#buy和#buy_status – 2012-04-06 06:09:15

@KhalidOkiely - 你正在慢慢解釋你正在嘗試做什麼。現在，我明白你想添加gif圖片只是點擊按鈕，我已經修改我的答案來做到這一點。它假定你正在使用'buy_button'，'buy_status'和'item_buy'類。 – jfriend00 2012-04-06 06:23:40

我會看一下，雖然我可能不得不重寫另一個代碼，但我會盡量保持你的趨勢。感謝您的幫助:) – 2012-04-06 06:33:35

id是唯一值 - 在html頁面上，每個id必須具有唯一值。改爲使用class。

來源

2012-04-06 05:34:36 user1303559

兩件事情：

很難從樣品告訴，但有創建可用項目列表的迭代器？如果是這樣，你不應該使用唯一的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事件。

來源

2012-04-06 05:36:31

你需要把你的代碼放入$(document).ready()。所以它的：

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

此外，你可能想列出jfriend00的ID的建議。

來源

2012-04-06 05:39:45 rgin

回答

相關問題