0

ここにjQueryの初心者がいます。2行のテーブルがあり、これらの行の入力要素はオートコンプリートに設定されています。これは完全に機能します。

クリックするとjQueryが新しい行をテーブルに追加する「行を追加」ボタンがあります。これも完全に機能しますが、問題は追加された要素でオートコンプリートが機能しないことです。それらは機能する上記の要素と同じです完璧に。ここで何か不足していますか?ここにある問題を回避する方法はありますか?

コードは以下のとおりです。

jQuery

<script>
$(function() {

    $( ".id" ).autocomplete(
    {
         source: "autocomp.php?part=id"
    })

});

$(function() {

    $( ".internal" ).autocomplete(
    {
         source: "autocomp.php?part=internal"
    })

});

$(function() {

    $( ".title" ).autocomplete(
    {
         source: "autocomp.php?part=title"
    })

});

$(document).ready(function() {
$('a').click(function() {
   $('table').append('<tr><td><input name="id" class="id" type="text" /></td><td><input name="quantity" class="quantity" type="text" /></td><td><input name="internal" class="internal" type="text" /></td><td><input name="title" class="title" type="text" /></td><td>&pound;</td><td>&pound;</td></tr>');
});
});
</script>

そしてHTML

<table class="products" id="table" border="1" bordercolor="#000000" style="background-color:#FFFFFF; margin-left:5%; margin-top:40px;" width="90%" cellpadding="3" cellspacing="3">

    <tr>
        <td><b>ID</b></td>
        <td><b>Quantity</b></td>
        <td><b>Internal Name</b></td>
        <td><b>Title</b></td>
        <td><b>Unit Price</b></td>
        <td><b>Total</b></td>
    </tr>

    <tr>
        <td><input name="id" class="id" type="text" /></td>
        <td><input name="quantity" class="quantity" type="text" /></td>
        <td><input name="internal" class="internal" type="text" /></td>
        <td><input name="title" class="title" type="text" /></td>
        <td>&pound;</td>
        <td>&pound;</td>
    </tr>

    <tr>
        <td><input name="id" class="id" type="text" /></td>
        <td><input name="quantity" class="quantity" type="text" /></td>
        <td><input name="internal" class="internal" type="text" /></td>
        <td><input name="title" class="title" type="text" /></td>
        <td>&pound;</td>
        <td>&pound;</td>
    </tr>
            </table>

            <a href="javascript:void(0);">Add Line</a>

ご協力いただきありがとうございます。

4

1 に答える 1