Jquery 事件觸發兩次
[英]Jquery event fired twice
問題描述
我正在嘗試學習 Jquery 並且我正在做一些實驗。 這是我的標記：
<div id="wrapper">
<p id="success"></p>
<h1>Break the views</h1><br>
<img id ="product" src="Tshirt2.jpg">
<div id="our-prices">
<span>Price: </span><span id ="price">10</span><span> €</span><br>
<span>Tax: <span id = "tax">2,3</span><span> €</span><br>
<span>Total: </span><span id = "total">12,3</span><span> €</span><br>
<input id ="qty" type="range" value="1" min="0" max="10"></input><br>
<span>Picked: </span><span id ="qty">1</span><span> product(s):</span><br><br>
<button id="buy">ADD TO CART</button>
</div>
$(document).ready(function() {
$("#success").hide();
var qty = $("#qty").val();
console.log(qty);
$("#buy").click(function(){
$("#success").fadeIn(500);
$("#success").text(qty + " products were added to your cart");
$("#success").fadeOut(500);
});
});
$("#qty").change(function(){
var qty = $(this).val();
var price = qty * 10;
var tax = price * 0.23;
var total = price + tax;
$("#price").text(price);
$("#tax").text(tax.toFixed(2));
$("#total").text(total);
$("span #qty").text(qty);
$("#buy").click(function(){
$("#success").fadeIn(500);
$("#success").text(qty + " products were added to your cart");
$("#success").fadeOut(500);
如果 #qty 中發生更改的事件，則成功事件（隱藏/淡入淡出）將觸發兩次。 另一方面，如果我沒有在document.ready聲明var qty ，這個問題就解決了，但是在頁面加載時 var qty 的初始狀態是未定義的。 為什么會這樣？ 基本上我的問題是如何重寫它以便在 .changed 事件中可以使用變量數量？ 謝謝
3 個解決方案
解決方案1
1 已采納 2015-10-09 07:16:01
評論 ：
- 你有兩個元素，id=qty
- 你聲明 $("#buy").click(function() 兩次
- 要使 var qty 在整個文檔中可用，您必須聲明一次，然后您可以更改該值（但不能重新聲明）
運行此代碼片段以查看結果
<!DOCTYPE html> <html> <head> <title>The code</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <body> <div id="wrapper"> <p id="success">Success</p> <h1>Break the views</h1><br> <img id ="product" src="Tshirt2.jpg"> <div id="our-prices"> <span>Price: </span><span id ="price">10</span><span> €</span><br> <span>Tax: <span id = "tax">2,3</span><span> €</span><br> <span>Total: </span><span id = "total">12,3</span><span> €</span><br> <input id="qty" type="range" value="1" min="0" max="10"/><br> <span>Picked: </span><span id="qtySpan">1</span><span> product(s):</span><br><br> <button id="buy">ADD TO CART</button> </div> </div> <script> var qty; $(document).ready(function(){ $("#success").hide(); $("#buy").click(function(){ qty=$("#qty").val(); $("#success").fadeIn(500); $("#success").text(qty+" products were added to your cart"); $("#success").fadeOut(500); }); $("#qty").change(function(){ qty=$("#qty").val(); var price =qty*10; var tax = price*0.23; var total =price +tax; $("#price").text(price); $("#tax").text(tax.toFixed(2)); $("#total").text(total); $("span#qtySpan").text(qty); }); }); </script> </body> </html>
解決方案2
0 2015-10-09 06:59:45
請刪除最后一次購買按鈕事件代碼。
當數量改變時你有綁定事件，所以當你改變數量時它會增加綁定所以從 $("#qty").change(function(){ function 中刪除購買事件
$("#buy").click(function(){
$("#success").fadeIn(500);
$("#success").text(qty+" products were added to your cart");
$("#success").fadeOut(500);
解決方案3
0 2015-10-09 07:01:41
我認為在開始使用 jQuery 之前，您需要閱讀一些 JavaScript 基礎知識和語法，因為這里有幾個簡單的錯誤。
直接的問題是您的$("#qty").change()函數永遠不會關閉，而且您還調用了$("#buy").click兩次。 作為起點，進行以下更改...
$(document).ready(function() {
$("#success").hide();
var qty = $("#qty").val();
console.log(qty);
$("#buy").click(function(){
$("#success").fadeIn(500);
$("#success").text(qty + " products were added to your cart");
$("#success").fadeOut(500);
});
});
$("#qty").change(function(){
var qty = $(this).val();
var price = qty * 10;
var tax = price * 0.23;
var total = price + tax;
$("#price").text(price);
$("#tax").text(tax.toFixed(2));
$("#total").text(total);
$("span #qty").text(qty);
// Removed seconds $("#buy").click listener and closed function
});
使用 jQuery 手動更改無線電組時更改事件觸發兩次
[英]Change event fired twice on changing radio group manually with jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.