javascript/jQuery多次調用 - 需要弄清楚爲什麼

Question

我有一個腳本，通過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函數：當從菜單中選擇「促銷1」選擇的值

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); 
        } 
      }); 

     }); 

    }); 
    } 

該函數應開球。這是我能做到的唯一方法。我假設他們是一個純粹的jQuery方式來做到這一點，並消除了多次調用。這是我掙扎的地方。

謝謝！

Answer 1

你做一個鼠標懸停（從您的標記）每當它增加了一個新的處理程序：

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"> 

THEN行將成爲其中之一：

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

，你的事件可能是：

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