javascript/jQuery 여러 호출 만들기 - 이유를 알아야합니다.

Question

jQuery ajax를 통해 가격을 계산하는 스크립트가 있고 Firebug 콘솔에서 동일한 Ajax GET 호출이 여러 번 (때로는 수십) 번 발생합니다 . 함수를 시작하기 위해 자바 스크립트와 jQuery를 섞어서 사용하고 있는데 이것이 문제라고 생각합니다. 나는 단지 그것을하는 더 효율적인 방법을 모른다.

메뉴에서 값을 선택하면이 기능이 실행됩니다. 여기에 대한 코드는 다음

여기

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

자바 스크립트/jQuery를 함수이다 : 값이 메뉴 "promo1"로부터 선택되는 경우

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 방법이라고 가정합니다. 이것은 내가 고심하고있는 곳이다.

감사합니다. 무언가 같이

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

가 있어야한다 :

Answer 1

은 (마크 업에서) 마우스 오버를 할 때마다 그것은 새로운 핸들러 추가 당신은 "행"을 얻을해야합니다

$(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(){