Trigger Repeater下拉事件JQuery

Question

我想在每次用户选择下拉值时添加值数量和片段类型。目前我只能使用＆＃34;添加＆＃34;我在下面发布的代码的按钮不是通过下拉发布的。

这是我的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>

我正在使用github中的Jquery Repeater。我试过这个fiddle作为测试，但它没有在wordpress上工作。

Answer 1

因为，在dropdownselection上，你想要执行与Add click ...

相同的功能

我将该功能设为指定功能...并在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);
});