Question

我正在使用jquery执行添加/删除输入字段 - 如下所示我想要做的是当我点击#AddInputService按钮它添加输入字段，然后我输入价格。

当我围绕输入值进行每个循环时，我没有得到任何值接受在第一个输入字段中输入的第一个值..这里是下面的代码

<span class="tools pull-right">
<button id="AddInputService" data-toggle="button">
</button>
</span>
    <table class="table">
    <thead>
    <tr>

    <th width="">Price</th>
    <th width=""><i class="fa fa-cogs"></i></th>
    </tr>
    </thead>
    <tbody id="serviceInner">

     // ^^ inputs fields will be added here when button is clicked

    <tfoot>
    <tr>
    <td colspan="5" class="left">
        <span class="T">Total</span> 
        <span id="totalServices">00.00</span>
    </td>
    </tr>
    </tfoot>
    </tbody>
    </table>

 jQuery(document).ready(function(event) {
         event.preventDefault();

     //initlal count
var x = 1;
$('#AddInputService').live('click', function(event) {
        event.preventDefault();

// Tbody inner - 
var tbodyInner = $('#serviceInner');

    // ^^^ This is part is working - it's adding inputs :-)
$(tbodyInner).append('<tr><td><input type="text" class="form-control" value="" class="price" placeholder="0.00"></td><td><button data-toggle="button" class="btn btn-default" id="serviceDelete"><i class="fa fa-trash-o"></i></button></td></tr>');

        binding();
 }); // end 

$('#serviceDelete').live('click', function(event) {
        event.preventDefault();

$(this).parent().parent().remove(); x--;
        update_total_services();
}); // end

}); // end ready

function update_total_services() {
        var total = 0;
        var totalServices = $('#totalServices');

        // ^^ Something wrong here i can't get it right
        $('.price').each(function() {

            var price = $(this).val();
            total += Number(price);
        });

        totalServices.text(total+'.00');
 }

function binding() {
   $(".price").blur(update_total_services);
}

Answer 1

首先，您应为每个动态文本输入生成唯一的id属性。这是一个很好的做法。

其次，不是在.each（）的选择器中引用特定文本输入的id，而是引用所有文本输入的父容器。

循环使用$ .each（）并计算输入值

1 个答案: