jquery自動完成與使用類創建的動態行

我已經創建了一個使用JQuery和使用類的動態表。我的表HTML如下jquery自動完成與使用類創建的動態行

<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是這樣： $（ '＃addservice'）點擊（函數（）{

    $(".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文本框。

有什麼建議？

感謝

來源

2014-02-20 Saj

需要初始化的窗口小部件，一旦新行添加到表像

$('#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而不是將處理程序僅綁定到新添加的元素

來源

2014-02-20 04:04:43

jquery自動完成與使用類創建的動態行

回答

相關問題