Question

我使用Jquery并使用类创建了一个动态表。我的表格HTML如下

<td><a id="addservice" href="javascript:;">Add A Service</a></td>
<tr valign="top" class="item-row">
                    <td width="410"><input name="customFieldName" type="text" size="50" id="customFieldName" /></td>
                    <td width="130" align="center"><input name="customFieldOurCost" type="text" id="customFieldOurCost" size="10"  /></td>
                    <td width="130" align="center"><input name="customFieldQuantity" type="text" id="customFieldQuantity" size="10" class="qty" /></td>
                    <td width="130" align="center"><input name="customFieldPrice" type="text" id="customFieldPrice" size="10" class="cost" /></td>
                    <td width="130" align="center"><input type="checkbox" name="GST"  checked="checked" class="gst" />
                      </td>
                    <td width="130" align="center"><span class="exprice">$00.00</span></td>
                    <td width="130" align="center"><span class="incprice">$00.00</span></td>
                  </tr>

我的Jquery是这样的： $（＆＃39;＃addservice＆＃39）。单击（函数（）{

                    $(".item-row:last").after('<tr valign="top" class="item-row"><td width="410"><input name="customFieldName" type="text" size="50" id="customFieldName" /></td><td align="center"><input name="customFieldOurCost" type="text"/></td><td width="130" align="center"><input name="customFieldQuantity" type="text" size="10" class="qty" /></td><td width="130" align="center"><input name="customFieldPrice" class="cost" type="text" size="10" /></td><td width="130" align="center"><input type="checkbox" name="GST" checked="checked" class="gst" /></td><td width="130" align="center"><span class="exprice">$00.00</span></td><td width="130" align="center"><span class="incprice">$00.00</span></td></tr>');

                    bind();
                });


                function bind() {
                    $('.cost').blur(update_price);
                    $('.qty').blur(update_price);   
                    $('.gst').click(update_price);


                }

                function update_price() {
                    var row2 = $(this).parents('.item-row');
                    if(row2.find(".gst").is(':checked'))
                    {
                        var price = row2.find('.cost').val().replace("$","") * row2.find('.qty').val();
                        isNaN(price) ? row2.find('.exprice').html(N/A) : row2.find('.exprice').html("$"+price);
                        var gstincprice = price * 1.1;
                        row2.find('.incprice').html("$"+gstincprice);
                    }
                    else
                    {
                        var price = row2.find('.cost').val().replace("$","") * row2.find('.qty').val();
                        isNaN(price) ? row2.find('.exprice').html(N/A) : row2.find('.exprice').html("$"+price);
                        row2.find('.incprice').html("$"+price);
                    }

                    update_total();

                }

                function update_total() {
                    var extotal = 0;
                    var inctotal = 0;
                    var gstamount = 0;
                    var fullamount = 0;
                    $('.exprice').each(function(i) {
                        price = $(this).html().replace("$", "");
                        if (!isNaN(price)) extotal += Number(price);    
                    });
                    $('.incprice').each(function(e) {
                        price2 = $(this).html().replace("$", "");
                        if (!isNaN(price2)) inctotal += Number(price2); 
                    });

                    gstamount = inctotal - extotal;
                    fullamount = extotal + gstamount;
                    $('#subtotal').html("$" + extotal);
                    $('#gsttotal').html("$" + gstamount);
                    $('#fullamount').html("$" + fullamount);
                }

我无法将自动完成功能绑定到customFieldName文本框。

有什么建议吗？

由于

Answer 1

一旦将新行添加到表中，您需要初始化窗口小部件，如

$('#addservice').click(function () {
    var $row = $('<tr valign="top" class="item-row"><td width="410"><input name="customFieldName" type="text" size="50" id="customFieldName" /></td><td align="center"><input name="customFieldOurCost" type="text"/></td><td width="130" align="center"><input name="customFieldQuantity" type="text" size="10" class="qty" /></td><td width="130" align="center"><input name="customFieldPrice" class="cost" type="text" size="10" /></td><td width="130" align="center"><input type="checkbox" name="GST" checked="checked" class="gst" /></td><td width="130" align="center"><span class="exprice">$00.00</span></td><td width="130" align="center"><span class="incprice">$00.00</span></td></tr>').insertAfter(".item-row:last");

    bind($row);
});

function bind($row) {
    $row.find('.cost').blur(update_price);
    $row.find('.qty').blur(update_price);
    $row.find('.gst').click(update_price);
    $row.find('input[name="customFieldName"]').autocomplete({});//your autocomplete configuration
}

另请注意，在添加了新行的代码中，添加新的模糊/单击处理程序以添加与.cost所述选择器匹配的现有元素，而不是仅将处理程序绑定到新添加的元素< / p>

使用类创建的动态行的jquery自动完成

1 个答案: