從ajax返回的jQuery不起作用

Question

所以我有2個單選按鈕，應該可以更改頁面中的一行。

要更改的行的代碼是：

<span id='checkout_total' class="pricedisplay checkout-total">
<span class='pricedisplay'>&#036;13.00</span></span>

當單擊單選按鈕時，我有一個ajax請求返回以下內容：

jQuery('.pricedisplay.checkout-total').html("<span class='pricedisplay'>&#036;16.00</span>");

所以現在span class ='pricedisplay'應該顯示16.00而不是13.00

問題是，它沒有在頁面中更改。.仍然顯示13.00。

如果我在chrome中使用開發工具並將jquery行粘貼到控制台中，則它會正確更改

Answer 1

您的選擇器應為#checkout_total或.checkout_total不能使用.pricedisplay因為兩個跨度都具有相同的類，並且您正在替換<span id='checkout_total' class="pricedisplay checkout-total">內的span元素

 $(function(){  //just incase if you missed this
    jQuery('#checkout_total').html("<span class='pricedisplay'>&#036;16.00</span>");
 });

因為您在該元素中提到了ID，所以我將使用jQuery('#checkout_total') 。

如果您只需要更改跨度內的文本，則可以使用

jQuery('#checkout_total .pricedisplay').text("$16.00");

Answer 2

試試看（代碼更淺）

jQuery('#checkout_total .pricedisplay').html("$16.00");