觸發中繼器下拉事件JQuery

Question

每次用戶選擇一個下拉值時，我都想增加數量和片段類型。目前我只能使用「添加」按鈕來實現這一點，代碼是我在下面發佈的以下代碼不是通過下拉。

這裏是我的jQuery代碼。

jQuery(document).ready(function($) { 

     var count   =  0; 
     var count_piece  =  0; 
     var price   =  0; 
     var total   =  0; 
     var documents  =  "Documents (Up to 1kg)"; 
     var small   =  "Small (1-5kg 85cm)"; 
     var medium   =  "Medium (5-10kg 110cm)"; 
     var large   =  "Large (10-20kg 150cm)"; 
     var extra   =  "Extra Large (20-30kg 160cm)"; 

     $("input[value='Add']").click(function(){ 

      var qty   = $('input[name*="['+count+++'][qty]"]').val(); 
      var piece_type = $('select[name*="['+count_piece+++'][piece_type]"]').find(":selected").text(); 

      if(piece_type == documents) 
      { 
       price = 10; 
       var sum = parseFloat(qty) * parseFloat(price); 

       total += sum; 
      } 

      if(piece_type == small) 
      { 
       price = 20; 
       var sum = parseFloat(qty) * parseFloat(price); 

       total += sum; 
      } 

      if(piece_type == medium) 
      { 
       price = 30; 
       var sum = parseFloat(qty) * parseFloat(price); 

       total += sum; 
      } 

      if(piece_type == large) 
      { 
       price = 40; 
       var sum = parseFloat(qty) * parseFloat(price); 

       total += sum; 
      } 

      if(piece_type == extra) 
      { 
       price = 50; 
       var sum = parseFloat(qty) * parseFloat(price); 

       total += sum; 
      } 

      $("#wpc_total").text("Total : $"+total); 
     }); 


    }); 

和我的HTML標記

 <tbody data-repeater-list="pq_package_items"> 
    <tr data-repeater-item> 
    <td><input class="number" type='text' name="qty" required="required"/></td> 
    <td> 
     <select name="piece_type" required="required"> 
      <option value="">Select Type</option> 
      <option value="Documents (Up to 1kg)">Documents (Up to 1kg)</option> 
      <option value="Small (1-5kg 85cm)">Small (1-5kg 85cm)</option> 
      <option value="Medium (5-10kg 110cm)">Medium (5-10kg 110cm)</option> 
     </select> 
    </td> 
    <td><input data-repeater-delete type="button" value="Delete"/></td> 
</tr> 
</tbody> 

我使用這個Jquery Repeater從GitHub。我試過這個fiddle作爲測試，但它不適用於wordpress。

Answer 1

自上dropdownselection，要執行同樣的功能添加點擊...

我作出這樣的函數命名函數...並調用它的input點擊和上select變化。因爲Repeater pluging克隆你的錶行，所以也使用delegation。

試試這個：

jQuery(document).ready(function($) { 

    var count   =  0; 
    var count_piece  =  0; 
    var price   =  0; 
    var total   =  0; 
    var documents  =  "Documents (Up to 1kg)"; 
    var small   =  "Small (1-5kg 85cm)"; 
    var medium   =  "Medium (5-10kg 110cm)"; 
    var large   =  "Large (10-20kg 150cm)"; 
    var extra   =  "Extra Large (20-30kg 160cm)"; 

    function checkTotal(){ 

    var qty   = $("input[name*='qty']"); //.val(); 
    var piece_type = $("select[name*='piece_type']"); //.find(":selected").text(); 

    qty.each(function(index){ 

     var quantity = qty.eq(index).val(); 

     if(piece_type.eq(index).find(":selected").text() == documents) 
     { 
     price = 10; 
     var sum = parseFloat(quantity) * parseFloat(price); 

     total += sum; 
     } 

     if(piece_type.eq(index).find(":selected").text() == small) 
     { 
     price = 20; 
     var sum = parseFloat(quantity) * parseFloat(price); 

     total += sum; 
     } 

     if(piece_type.eq(index).find(":selected").text() == medium) 
     { 
     price = 30; 
     var sum = parseFloat(quantity) * parseFloat(price); 

     total += sum; 
     } 

     if(piece_type.eq(index).find(":selected").text() == large) 
     { 
     price = 40; 
     var sum = parseFloat(quantity) * parseFloat(price); 

     total += sum; 
     } 

     if(piece_type.eq(index).find(":selected").text() == extra) 
     { 
     price = 50; 
     var sum = parseFloat(quantity) * parseFloat(price); 

     total += sum; 
     } 

     $("#wpc_total").text("Total : $"+total); 
    }); 
    } 

    $(document).on("click", "input[value='Add']", checkTotal); 
    $(document).on("change", "select[name*='piece_type']", checkTotal); 
});