автозаполнение jquery с динамической строкой, созданной с использованием класса

Question

автозаполнение jquery с динамической строкой, созданной с использованием класса

0

Я создал динамическую таблицу, используя 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 таков: $ ('# addervice'). Click (function() {

                    $(".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.

Какие-либо предложения?

благодаря

Saj 20 фев. 2014, в 05:56

Источник

Теги:

jquery

1 ответ

Ещё вопросы

Arun P Johny · Accepted Answer · 2014-02-20T01-18-00.000Z

Вы должны инициализировать виджет, как только новая строка будет добавлена в таблицу, как

$('#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
}

Также обратите внимание, что в вашем коде, где добавлена новая строка, вы добавляете новый обработчик blur/click для добавления существующих элементов, соответствующих указанным селекторам, например .cost вместо привязки обработчиков только к вновь добавленным элементам