Question

编辑：这个问题问了很多。这是understanding event delegation的链接。直接的答案是使用.on（＆＃39; event＆＃39;，＆＃39; selector＆＃39;，function）;在我的情况下是$（＆＃34; fieldset＆＃34;）。on（＆＃39; keyup＆＃39;，＆＃39; .line输入＆＃39;，multInputs）;

我正在制作一张发票，允许用户点击按钮添加额外的服务付款。每行服务都有一个小计。

我遇到的问题是我无法获得使用jQuery动态添加的字段的小计.before。

这是我的发票表单，其中包含添加另一行的按钮：

<div class="control-group">
     <label class="control-label"> Service</label><div class="controls form-inline">
      <div class="line">
       <input type="text" class="span3" id="serivceName" placeholder="Service name">
       <input type="text" class="qty span1" id="qty" placeholder="qty">
       <input type="text" class="price input-small" name="cost" id="service" placeholder="Price">
       <input type="text" class="subtotal" id="sub" name="sub" value="">
      </div>
     </div>
  </div>

 <div class="serviceHelper"></div> 
       <br />
       <br />
 <div class="pull-right span2">
      Total: <span id="income_sum" class="g_total"/>
       </div>

       <div>
      <a  id='addService' class="btn btn-success btn-small">Add another Product or Service</a><br />
                    </div>

这是jQuery中的小计函数：

$(".line input").keyup(multInputs);
function multInputs() {
   var mult = 0;

      //iterate through the .line div and find values
   $(".line").each(function () {    
       var $val1 = $('.qty', this).val();
       var $val2 = $('.price', this).val();
       var $total = $val1 * $val2;

         //make the subtotal input equal the total var
       $(this).find(".subtotal").val($total);

         //add the subtotals together to make the invoice total
       var $form = $('#wizard');
       var $summands = $form.find('.subtotal');
       var $sumDisplay = $('#income_sum');
       var $sum = 0;
       $summands.each(function ()
        {
            var value = Number($(this).val());
            if (!isNaN(value)) $sum += value;
        });
    $sumDisplay.text(sum);
    });

}

用户添加的发票行是页面上已存在的控件组的副本，但已修改，因为我将其插入到jQuery-Steps向导中。

    $("#addService").click(function(){
    $(".serviceHelper").before("<div class='control-group'> <div class='controls form-inline'>"+
       "<div class='line'>"+
       "<input type='text' class='span3' id='serivceName' placeholder='Service name'> "+
       "<input type='text' class='qty span1' id='qty' placeholder='qty'> "+
       "<input type='text' class='price input-small' name='cost' id='service' placeholder='Price'> "+
       "<input type='text' class='subtotal' id='sub' name='sub' value=''>"+
       "</div> </div> </div>");
     });

您是否明白为什么小计将适用于页面上的输入，但不适用于动态添加的小计？ TIA

Answer 1

jQuery在运行时只知道页面中的元素，因此添加到DOM的新元素无法被jQuery识别。为了解决这个问题，你必须使用event delegation，将新添加的项目中的事件冒泡到jQuery在页面加载时运行时的那个点。许多人使用document作为捕捉起泡事件的地方，但没有必要在DOM树上走得那么高。当然是you should delegate to the nearest parent that exists at the time of page load.

$(document).on('keyup', ".line input", multInputs);

keyup上的.line input现在冒泡到文档级别，可以在那里处理。

使用.before添加输入时，jquery中的小计和总计

1 个答案: