Jquery 事件触发两次
[英]Jquery event fired twice
问题描述
I m trying to learn Jquery and I m doing some experiments.
我正在尝试学习 Jquery 并且我正在做一些实验。 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.如果 #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.另一方面，如果我没有在document.ready声明var qty ，这个问题就解决了，但是在页面加载时 var qty 的初始状态是未定义的。 Why is this happening?为什么会这样？ Basically my question is how can I rewrite this in order Variable Qty is available inside the .changed event ?基本上我的问题是如何重写它以便在 .changed 事件中可以使用变量数量？ Thank you谢谢
3 个解决方案
解决方案1
1 已采纳 2015-10-09 07:16:01
Remarks :评论 ：
- you have two elements with the id=qty你有两个元素，id=qty
- you declare the $("#buy").click(function() twice你声明 $("#buy").click(function() 两次
- 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)要使 var qty 在整个文档中可用，您必须声明一次，然后您可以更改该值（但不能重新声明）
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>
解决方案2
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当数量改变时你有绑定事件，所以当你改变数量时它会增加绑定所以从 $("#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
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.我认为在开始使用 jQuery 之前，您需要阅读一些 JavaScript 基础知识和语法，因为这里有几个简单的错误。
The immediate problem is that your $("#qty").change() function never closes, but also you're calling $("#buy").click twice.直接的问题是您的$("#qty").change()函数永远不会关闭，而且您还调用了$("#buy").click两次。 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
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.