Jquery event fired twice
Question
I m trying to learn Jquery and I m doing some experiments. Here is my markup :
<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);
The success event (hide / fade) is firing twice if changed event occurs in #qty. On the other hand if I don't declare var qty in document.ready , this is solved but the initial state of var qty is undefined on page load. Why is this happening? Basically my question is how can I rewrite this in order Variable Qty is available inside the .changed event ? Thank you
3 answers
solution1
1 ACCPTED 2015-10-09 07:16:01
Remarks :
- you have two elements with the id=qty
- you declare the $("#buy").click(function() twice
- to make the var qty avaible on the whole document, you must declare it once and the you can change the value after (but not redeclare)
Run this code snippet to see the result
<!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>
solution2
0 2015-10-09 06:59:45
Please remove last buy button event code.
You have bind event when qty change so it will increase the bind when you change the qty so remove buy event from $("#qty").change(function(){ function
$("#buy").click(function(){
$("#success").fadeIn(500);
$("#success").text(qty+" products were added to your cart");
$("#success").fadeOut(500);
solution3
0 2015-10-09 07:01:41
I think you need to read up a bit on JavaScript basics and syntax before jumping in to jQuery, as there's a couple of simple mistakes in here.
The immediate problem is that your $("#qty").change() function never closes, but also you're calling $("#buy").click twice. As a starting point make the following changes...
$(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
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.