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

     }); 
       }); 

感谢您的帮助之前的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/