JQuery 및 동적 테이블 행

Question

나는 jquery가있는 장바구니를 다소 만들려고 노력하고 있으며 모든 작업을 수행하는 방법을 알아내는 시간을 가지고 있습니다.

누군가 내 웹 사이트에서 광고 공간을 살 수있는 곳이 있습니다. 5 열 (우편 번호 열 (입력), 서비스 열 (선택 상자), 광고 크기 (선택 상자), 광고 가격 (입력 읽기 전용) 및 행 추가 또는 제거 옵션 열이있는 테이블이 있습니다. 내가 크거나 작은 광고에 대한 옵션을 추가하고 광고 크기에 따라 다른 가격을 책정하고 싶었다 제대로 때까지.

 <table style='width: 100%;' id='adsTable'> 
      <tr class='addedRow'> 
       <td>Zip</td> 
       <td>Service</td> 
       <td>Ad Size</td> 
       <td>Price</td> 
       <td>Options</td> 
      </tr> 
      <tr> 
       <td><input type='text' maxlength='5' class='zip' /></td> 
       <td> 
        <select name='serviceType' class='serviceType rounded'> 
         <option value="">Choose One...</option> 
         <option>Plumbing</option> 
         <option>Roofing</option> 
         <option>HVAC</option> 
         <option>Appliance Repair</option> 
         <option>Flooring</option> 
         <option>Electrical</option> 
         <option>Doors/Windows</option> 
         <option>Siding</option> 
         <option>Other</option> 
        </select> 
       </td> 
       <td> 
        <select name='' class='ad_size'> 
         <option value='4.99' class='ad_lg'>Large</option> 
         <option value='1.99' class='ad_sm'>Small</option> 
        </select> 
       </td> 
       <td> 
        <div class="input-prepend"> 
         <span class="add-on"><i class="icon-usd"></i></span> 
         <input class='addPrice' value='4.99' type='text' readonly='readonly' /> 
        </div> 
       </td> 
        <td class='options'> 

        </td> 
      </tr> 

     </table> 

내 jQuery를 밖으로 제거하고 시도하고 모든 것을 알아 내기 위해 몇 번에 걸쳐 시작했지만 광고 크기의 선택 후 모든 입력을 추가하는 방법에 갇히지 유지한다. 내가 여기 당신의 도움을 위해

//Varible that stores the extra table row 
    var $adTableRow = "<tr class='addedRow'><td><input type='text' maxlength='5' /></td><td><select name='serviceType' id='serviceType' class='rounded'><option value=''>Choose One...</option><option>Plumbing</option> <option>Drain Cleaning</option><option>Roofing</option><option>HVAC</option><option>Appliance Repair</option><option>Flooring</option> <option>Electrical</option><option>Doors/Windows</option><option>Siding</option><option>Other</option></select></td><td><select name='' class='ad_size'><option value='4.99' class='ad_lg'>Large</option><option value='1.99' class='ad_sm'>Small</option></select></td><td><div class='input-prepend'><span class='add-on'><i class='icon-usd'></i></span><input class='addPrice' value='4.99' type='text' readonly='readonly' /></div></td><td class='options'><i class='icon-remove removeAd' title='Remove This Ad'></i></td></tr>"; 

    $(document).ready(function() { 
     $('#addTotalBox').val("4.99"); 
     //Assign the right price amount according to users selection 
     $(".ad_size").on('change', function() { 
      //Grab the value of the select box and store it in a variable 
      var ad_cost = $(this).val(); 
      //Insert the value into the pricing box    
      $(this).parent().next().children().find('.addPrice').val(ad_cost); 
      //Set the total box to the right price according to ad size 
      $('input').each(function(index,data) { 
       var value = $(this).val(); 
      }); 
     }); 

     $('.addRow').on('click', function() { 
      $("#adsTable").append($adTableRow); 
      firstRow = false; 


      //var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val(); 

     }); 
       }); 

덕분에 오기 전에 나는 끝났다을 heres jQuery를 사전에

Answer 1

위의 내 의견에 따라 논리에 함수를 넣은 다음 새 행을 추가 할 때마다이 함수를 다시 초기화해야합니다.

function reInit(){ 
    $(".ad_size").on('change', function() { 
     console.log('test'); 
     //Grab the value of the select box and store it in a variable 
     var ad_cost = $(this).val(); 
     //Insert the value into the pricing box    
     $(this).parent().next().children().find('.addPrice').val(ad_cost); 
     //Set the total box to the right price according to ad size 
     $('input').each(function(index,data) { 
      var value = $(this).val(); 
     }); 
    }); 
} 

다음에, 전화 :

$('.addRow').on('click', function() { 
    $("#adsTable").append($adTableRow); 
    firstRow = false; 

    reInit(); 
    //var addedAdPrice = $(this).parent().prev().children().find('.addPrice').val(); 

}); 

다음 작업 바이올린 http://jsfiddle.net/QwnuR/2/