javascript / jQuery进行多次调用 - 需要找出原因

时间:2013-04-09 20:11:17

标签: jquery

我有一个通过jQuery ajax计算价格的脚本,我在Firebug控制台中注意到同一个ajax GET调用发生了多次(有时几十次)。我正在使用javascript和jQuery的混合启动功能,我感觉这是问题。我只是不知道一种更有效的方法。

从菜单中选择值时,该功能运行。这是代码:

<div id="order_promo">
<select name="promo1" id="promo1" onmouseover="CalcPromo(1)">
<option value="1">Name1</option
.....
.....
</select>
</div>

这是javascript / jQuery函数:

function CalcPromo(row){
      $(function(){
         $('#promo' + row).change(function(){
                //values to pass to php script for calculations

                var promo=$(this).val();
                var id=$('#item' + row).val();
                var qty=$('#qty' + row).val();
                var price=$('#price' + row).val();

                var dataString = 'prodid='+ id + '&qty=' + qty + '&price=' + price + '&promo=' + promo + '&type=promo' + '&row=' + row ; //string passed to url
                $.ajax
                ({
                    url: "includes/ajax/orders2.php", //url of php script
                    dataType: 'json', //json is return type from php script
                    data: dataString, //dataString is the string passed to the url
                    success: function(pricedata) //pricedata is the name of json array that is returned
                    {
                        //individual values from json array
                        var listprice = pricedata["price"];
                        var disc = pricedata["disc"];
                        var total = pricedata["total"];
                        var tax = pricedata["tax"];
                        var grand = pricedata["grand"];

                        //set each value using text box id value using javascript val() function
                        $('#price' + row).val(listprice);
                        $('#discprice' + row).val(disc);
                        $('#itemprice' + row).val(total);
                        $("#tax").val(tax);
                        $("#grandtotal").val(grand);
                     },
                     error: function(request, status, error)
                     {
                         alert(request.responseText);
                     }
            });

        });

    });
    }

当从菜单“promo1”中选择一个值时,该功能应该启动。这是我能让它发挥作用的唯一方法。我假设他们是一个纯粹的jQuery方式来做到这一点并消除多个调用。这是我在努力的地方。

谢谢!

1 个答案:

答案 0 :(得分:2)

每次你执行鼠标悬停(从你的标记),它都会添加一个新的处理程序:

function CalcPromo(row){ 
    $(function(){
        $('#promo' + row).change(function(){

应该是这样的:

$(function(){
     $('select[id^="promo"]').change(function(){

你需要得到一个“行” - 哪个可能和选择的索引?没有你的标记来评估:

var row = $(this).index('select');

从标记中删除行为:

<select name="promo1" id="promo1" onmouseover="CalcPromo(1)">

变为

<select name="promo1" id="promo1">

替代方法是将一个类添加到标记中或更好地添加数据元素:

<select name="promo1" id="promo1" class="myselectorclass" data-row="1">

然后这一行成为其中之一:

var row = $(this).data("row");// use this one
// OR
var row = $(this).index('.myselectorclass');

您的活动可能是:

$('.myselectorclass').change(function(){