0

私は今、解決策を1、2日見つけようとしていますが、うまくいきません..

id="items" を持つテーブルがあり、各行には "item-row" クラスがあります。articlename フィールドでオートコンプリートを使用しています (請求テーブル)。これは正常に動作します..新しい行を追加し、それらのフィールドのオートコンプリートをトリガーしたい場合、それらのフィールドは機能しません..行は追加されません....

// Get the table object to use for adding a row at the end of the table
var $itemsTable = $('#items');

// Create an Array to for the table row. ** Just to make things a bit easier to read.
var rowTemp = [
    '<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>'
].join('');

// Add row to list and allow user to use autocomplete to find items.
$("#addrow").bind('click',function(){
    var $row = $(rowTemp);

    // save reference to inputs within row
    var $itemCode           = $row.find('#articleName');
    var $itemDesc           = $row.find('#articleDescription');
    var $itemPrice          = $row.find('#articlePrice');
    var $itemQty            = $row.find('#articleQty');

    if ( $('#articleName:last').val() !== '' ) {

        // apply autocomplete widget to newly created row
        $row.find('#articleName').autocomplete({
            source: 'getproducts.php',
            minLength: 1,
            select: function(event, ui) {
                $itemCode.val(ui.item.itemCode);
                $itemDesc.val(ui.item.itemDesc);
                $itemPrice.val(ui.item.itemPrice);

                // Give focus to the next input field to recieve input from user
                $itemQty.focus();

                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                .appendTo( ul );
        };
        // Add row after the first row in table
        $('.item-row:last', $itemsTable).after($row);
        $($itemCode).focus();

    } // End if last itemCode input is empty
    return false;
});

A リンクには id="addrow" があります

ところで、次のコードを使用すると行が追加されますが、もちろんオートコンプリートはありません:

$("#addrow").bind('click',function(){


$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>');



if ($(".delete").length > 0) $(".delete").show();
bind();

});

誰かが光を当てるか、正しい方向に向けてくれることを願っています..どうもありがとう。

4

2 に答える 2

1

新しい行を追加しようとすると、正しくない要素の ID が重複します。オートコンプリートは最初の ID で利用できます。したがって、次のようなものを作成することをお勧めします。

  1. 同じIDを持つ複数の要素がないようにhtmlコードを変更する必要があります

  2. .onこのようにオートコンプリートにjquery関数を使用してみてください

    $('#your-table').on('load','.your-new-row-class',function(){ $(this).autocomplete({ // オートコンプリートの設定 }); });

于 2012-09-20T04:44:49.333 に答える
0

私は実際に次のコードで動作するようにしました：

$("#addrow").bind('click',function(){

    $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>');


    $(".item-row:last").find('#articleName').autocomplete({
            source: 'getproducts.php',
            select: function(event, ui) {
                var $itemrow = $(this).closest('tr');
                        // Populate the input fields from the returned values
                        $itemrow.find('#articleName').val(ui.item.articleName);
                        $itemrow.find('#articleDescription').val(ui.item.articleDescription);
                        $itemrow.find('#articlePrice').val(ui.item.articlePrice);

                        // Give focus to the next input field to recieve input from user
                        //$('#articleQty').focus();
                        $itemrow.find("#articleQty:last").focus();

                return false;
          }
        // Format the list menu output of the autocomplete
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.articleName + " - " + item.articleDescription + "</a>" )
                .appendTo( ul );
        };


if ($(".delete").length > 0) $(".delete").show();
bind();

});

これは大いに役立ちました：

var $itemrow = $(this).closest('tr');

まだ完璧なコードではないかもしれませんが、私にとってはうまくいきます。

答えてくれてありがとう;）

于 2012-09-20T05:23:59.483 に答える