我有jquery脚本，当页面加载并单击选择框时，它将触发一个事件。现在，当我从选择值更改选项时，我看到事件现在被触发两次。现在再次，如果我更改选项值，该事件将立即触发3次。每当更改选项值时，我只希望事件触发一次。
请参见下面的代码：-
function myNewFunction(sel) {
$(document).ready(function(){
$('#qty-input').val("");
$('#wasteCal').text("");
$("#NoOpttion").click(function() {
if (this.id == 'NoOpttion') {
var a = $('#wasteCal').text("");
console.log("wastage value = ");
console.log(a);
var getQty = $("#input-quantity").val();
$('#qty-input').val(getQty || 0);
onSkillCountChange();
}
$('#qty-input').keyup(function() {
onSkillCountChange();
});
$('#qty-input').change(function() {
onSkillCountChange();
});
function onSkillCountChange(){
var str = sel.options[sel.selectedIndex].text ,first,second;
str.replace(/(\d+) X (\d+)$/,function(str,p1,p2) {first = p1;second = p2});
var areatotal = document.getElementById('qty-input').value;
$("#areatotalt").text(areatotal);
var wastageCal = Math.ceil((parseInt(areatotal) * 0.10) + parseInt(areatotal)) ;
$("#wasteCal").text(wastageCal);
var total = first * second;
var size = (first + ' mm X ' + second + ' mm');
var tilesizeFirstcm = first / 1000; // tile width in CM e.g 0.6
$("#tilesizeFirstcmt").text(tilesizeFirstcm);
var tilesizeSecondcm = second / 1000; // tile height in CM e.g 0.6
$("#tilesizeSecondcmt").text(tilesizeSecondcm);
var totalonetilecm = tilesizeFirstcm * tilesizeSecondcm; //this will calculate area sq cm of one tile . e.g 0.36
$("#totalonetilecmt").text(totalonetilecm);
var boxperqty = $("#qtyperBox").text();
var totaloneboxcm = totalonetilecm * boxperqty; //this will calculate one box area cm . e.g. 1.44 . May required to add math ceil...
$("#totalboxreqt").text(totaloneboxcm);
var totalboxreq = Math.ceil(wastageCal / totaloneboxcm); //this will calculate how many boxes are required to do the project. e.g 9. May required to add math ceil...
$("#totaltilesreqt").text(totalboxreq);
$("#boxesTotal").text(totalboxreq);
var totaltilesreq = Math.ceil(totalboxreq * boxperqty); //this will calculate how many tiles in total are required to do the project . e.g 36. May required to add math ceil...
$("#totalreqtilest").text(totaltilesreq);
$("#tilesTotal").text(totaltilesreq);
$("#input-quantity").val(wastageCal || 0);
var qty = $('#input-quantity').val();
var price = $("#basePrice").text().replace('$', '') ;
var totalprice = qty * price;
$("#tpr").text(totalprice);
if (typeof first === "undefined") {
size = 'Please select the tile size';
$("#tileSize").text(size);
}
else {
$("#tileSize").text(size);
}
$("#totalreqtiles").text(totaltilesreq);
}
})
});
}
// JavaScript Document for some other action
$(document).ready(function(){
$('#wasteCal').text("");
$('#qty-input').val("");
$('#input-quantity').val("");
updateWastageAreaQty();
$("#qty-input").change(function(){
updateWastageAreaQty();
});
$("#qty-input").keyup(function(){
updateWastageAreaQty() ;
});
function updateWastageAreaQty(){
var value = $('#wasteCal').text();
$('#input-quantity').val(value);
}
});
$(document).ready(function(){
$('#qty-input').val("");
updateTotalPrice();
$('select').change(function() {
$('#qty-input').val("");
$('#input-quantity').val("");
$("#tpr").text("0");
updateTotalPrice();
});
$('#input-quantity').keyup(function() {
$('#qty-input').val(0);
updateTotalPrice();
});
$('#input-quantity').change(function() {
$('#qty-input').val(0);
updateTotalPrice();
});
$("#qty-input").change(function(){
updateTotalPrice();
});
$("#qty-input").keyup(function(){
updateTotalPrice();
});
$("#qty-input").keyup(function(){
updateTotalPrice() ;
});
function updateTotalPrice(){
var qty = $('#input-quantity').val();
var price = $("#basePrice").text().replace('$', '') ;
var totalprice = qty * price;
$("#tpr").text(totalprice);
}
});
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="ltr" lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="ltr" lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="ltr" lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Avalon Gloss Subway Duck Egg Blue Tile</title>
<base href="http://www.thetileco.com.au/" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- image hover effect-->
<link href="catalog/view/javascript/hover-effect-image/main.css" rel="stylesheet">
<!-- image hover effect end-->
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<link href="catalog/view/javascript/jquery/magnific/magnific-popup.css" type="text/css" rel="stylesheet" media="screen" />
<link href="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/jquery/datetimepicker/moment/moment.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/jquery/datetimepicker/moment/moment-with-locales.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<!-- product zoom start -->
<script src="catalog/view/javascript/zoom/jquery.elevatezoom.js" type="text/javascript"></script>
<!-- product zoom end -->
<!-- Sb Theme Custom javascript Start -->
<script src="catalog/view/javascript/sb-theme/sb-theme-custom.js" type="text/javascript"></script>
<!-- Sb Theme Custom javascript End -->
<!-- animation javascript Start -->
<script src="catalog/view/javascript/animation/custom.js" type="text/javascript"></script>
<link href="catalog/view/javascript/animation/animate.min.css" rel="stylesheet">
<!-- animation javascript End -->
<!--counter start -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
<!-- counter end -->
<!--RTL start -->
<!-- RTL END-->
<!--lightbox -->
<!-- <script src="catalog/view/javascript/inspire/blog/lightbox-2.6.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/inspire/blog/lightbox.css" rel="stylesheet" type="text/css" /> -->
<!--lightbox End-->
<link href="http://www.thetileco.com.au/index.php?route=product/product&product_id=58" rel="canonical" />
<!-- product zoom start -->
<script src="catalog/view/javascript/zoom/jquery.elevatezoom.js" type="text/javascript"></script>
<!-- product zoom end -->
<!-- Sb Theme Custom javascript Start -->
<script src="catalog/view/javascript/sb-theme/sb-theme-custom.js" type="text/javascript"></script>
<!-- Sb Theme Custom javascript End -->
<!-- animation javascript Start -->
<script src="catalog/view/javascript/animation/custom.js" type="text/javascript"></script>
<link href="catalog/view/javascript/animation/animate.min.css" rel="stylesheet">
<!-- animation javascript End -->
<!--counter start -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
<!-- counter end -->
<!--RTL start -->
<!-- RTL END-->
<!--lightbox -->
<!-- <script src="catalog/view/javascript/inspire/blog/lightbox-2.6.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/inspire/blog/lightbox.css" rel="stylesheet" type="text/css" /> -->
<!--lightbox End-->
<link href="http://www.thetileco.com.au/image/catalog/logo/logo5.png" rel="icon" />
<!-- Magic Thumb OpenCart module version v4.4.13 [v1.6.73:v3.0.14] -->
<script type="text/javascript">window["mgctlbx$Pltm"] = "OpenCart";</script>
<link type="text/css" href="catalog/view/css/magicthumb.css" rel="stylesheet" media="screen" />
<link type="text/css" href="catalog/view/css/magicthumb.module.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="catalog/view/javascript/magicthumb.js"></script>
<script type="text/javascript">
var mgtOptions = {
'captionSource':'title',
}
</script><script type="text/javascript">
var mgtMobileOptions = {
'slideMobileEffect':'rotate',
'textClickHint':'Tap to expand'
}
</script>
<script type="text/javascript">
function mtOnDomReady(fnc) {
if (typeof(jQuery) == "undefined") {
setTimeout(function() {
mtOnDomReady(fnc);
}, 250);
return;
}
jQuery(document).ready(fnc);
}
mtOnDomReady(function() {
jQuery(".hoverimage").on("click touchstart",
function() {
var newsrc = jQuery(this).attr("rel");
var arr = newsrc.split("!");
if (typeof MagicZoom != "undefined") {
MagicZoom.update(jQuery(".MagicZoom").attr("id"),arr[1],arr[0]);
} else if (typeof MagicThumb != "undefined") {
MagicThumb.update(jQuery(".MagicThumb").attr("id"),arr[1],arr[0]);
}
}
);
});
</script><script type="text/javascript">
var magicAddEvent = "je1";
if(typeof(magicJS.Doc.je1) == "undefined") magicAddEvent = "jAddEvent";
$mjs(document)[magicAddEvent]('domready', function() {
if (typeof display !== 'undefined') {
var olddisplay = display;
window.display = function (view) {
if ("MagicThumb" != "MagicZoomPlus") {
MagicThumb.stop();
olddisplay(view);
MagicThumb.start();
} else {
MagicZoom.stop();
olddisplay(view);
MagicZoom.start();
}
}
}
});
</script>
<script type="text/javascript">
var magictoolboxEvent = 'click';
var switchDelay = 350;
if(magictoolboxEvent == 'mouseover') switchDelay = switchDelay + 60;
</script>
<script type="text/javascript" src="catalog/view/javascript/magicthumb_product.js"></script>
</head>
<body>
<div id="product"> <hr>
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>Product Code:</strong></td>
<td> Sample 2 </td>
</tr>
<tr>
<td><strong>TIle size</strong></td>
<td>
<script>
$(document).ready(function () {
$('#input-option235').val(0);
});
</script>
<div class="form-group required ">
<!-- <label class="control-label" for="input-option235">TIle size</label> -->
<select name="option[235]" id="input-option235" class="form-control" onChange="myNewFunction(this);">
<option value="0"> --- Please Select --- </option>
<option value="38">75 X 300
</option>
<option value="39">75 X 150
</option>
</select>
</div></tr>
</td>
<tr>
<td><strong><span class="pp-titles">Qty Per Box <!-- Price in reward points: --></span> </strong></td>
<td id="qtyperBox">
<span class="spend-points-live">0</span>
</td>
</tr>
<tr>
<td><strong>Availability:</strong></td>
<td>In Stock </td>
</tr>
<script>
$(document).ready(function(){
$('#WastageQuest').modal('hide');
$('#input-quantity').focusout(function() {
$('#WastageQuest').modal('show');
});
$('#WastageQuest').modal('hide');
});
</script>
<tr>
<td><strong>Quantity</strong></td>
<td> <div class="form-group">
<!-- <label class="control-label pp-price-title" for="input-quantity"> Qty : </label> -->
<input type="text" name="quantity" value="1" class="p-p-qty form-control" size="2" id="input-quantity" class="form-control" /> m²
<input type="hidden" name="product_id" value="58" />
<br/>
</div>
<button type="button" class="btn btn-primary btn-sm" data-loading-text="Loading..." data-toggle="modal" data-target="#WastageQuest">
<span class="glyphicon glyphicon-th"></span> Quantity Calculator
</button>
</td>
</tr>
<tr>
<td><strong> Total Price : </strong> inc GST <br> (
<span class="price-old-live">$56</span>
Per m²)</td>
<hr>
<td>
<ul class="list-unstyled">
<li class="product-prices"><span class="pp-price-title"> <!-- Total Price : --> </span>
<div id="tPrice"> $<span id="tpr"> </span> </div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<!-- The Modal -->
<style>
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
</style>
<div class="modal fade" id="WastageQuest">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Quantity Calculator</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<h6>Does your quantity already include wastage? </h6>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" id="NoOpttion" class="btn btn-primary" data-dismiss="modal" data-loading-text="Loading..." data-toggle="modal" data-target="#QtyCalModal">No</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="QtyCalModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Quantity Calculator</h4>
<button type="button" id="btnClose" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<table class="table table-bordered">
<tbody>
<tr>
<td><strong>How many Square Meters do you need? </strong></td>
<td><div class="sub-heading modal__block-number">
<input class="form-control no-border" type="number" id="qty-input" size="5"> m²
</div></td>
</tr>
<tr>
<td><strong>
Tile Size</strong>
</td>
<td>
<div id="tileSize"> </div>
</td>
</tr>
<tr>
<td><strong>Amount of wastage needed</strong></td>
<td>10%</td>
</tr>
<tr>
<td><strong>
Area Total</strong>
</td>
<td>
<span id="areatotalt" class="modal__block-item-right"></span>
</td>
</tr>
<tr class="pp-price-title">
<td><strong>
Total Area needed after Wastage</strong>
</td>
<td>
<span id="wasteCal" class="modal__block-item-right"></span> m² required after wastage
</td>
</tr>
<tr>
<td><strong>
Box Required</strong>
</td>
<td>
<span id="totaltilesreqt" class="modal__block-item-right">
</td>
</tr>
<tr>
<td><strong>
Tiles Required</strong>
</td>
<td>
<span id="totalreqtilest" class="modal__block-item-right"></span>
</td>
</tr>
</tbody>
</table>
<div class="modal__block-item-left">You will need <strong><span id="tilesTotal"> </span> tiles </strong> (<span id="boxesTotal"> </span> boxes) to complete the project. </div>
<!-- <p> First Num <span id="tilesizeFirstcmt" class="modal__block-item-right"></span>
<p> Sec Num <span id="tilesizeSecondcmt" class="modal__block-item-right"></span>
<p> One Tile covers <span id="totalonetilecmt" class="modal__block-item-right"></span>
<p> One Box Covers <span id="totalboxreqt" class="modal__block-item-right"></span> -->
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="btn-group">
<button type="button" id="button-cart" data-loading-text="Loading..." class="btn btn-primary">Add to Cart</button>
<button type="button" data-toggle="tooltip" class="btn btn-primary p-p-btn" title="Add to Wish List" onclick="wishlist.add('58');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" class="btn btn-primary p-p-btn" title="Compare this Product" onclick="compare.add('58');"><i class="fa fa-refresh"></i></button>
</div>
<!--multiple option end -->
</body></html>
答案 0 :(得分：0)
尝试在每次初始化$('select').unbind('change')事件时添加$('select').change(...)。同样适用于所有其他事件触发器
示例：
$('select').unbind('change');
$('select').change(function() {
....
});
答案 1 :(得分：0)
myNewFunction每次调用时都会添加事件处理程序。每次输入更改时都会调用它。如此，您每次更改输入都会有一个事件处理程序。更改一次，更改1个事件处理程序，更改两次，更改2个事件处理程序，依此类推。在单独的函数而不是onchange中建立事件处理程序。