7

jQuery クローンを使用しているときに、テーブル内の複数の行に jQuery AutoComplete を適用しようとすると問題が発生します。オートコンプリートは最初の行で機能しますが、テーブルに追加の行が追加されると機能しません。これまでのところ、私は次のものを持っています：

HTML テーブル:

    <table class="table" cellspacing="0" id="myTable">
      <tr> 
        <th width="40%">Item</th> 
        <th width="60%">Description</th> 
      </tr> 
      <tr>
        <td>input name="product_title" id="product_title" type="text"><td> 
        <td><textarea name="product_description" id="product_description"></textarea></td> 
      </tr> 
    </table>
   <input type="button" value="Add Row" onclick="javascript:addRow()">

クローン スクリプト:

function addRow(){
  $('#myTable tr:last').clone(true).insertAfter('#myTable tr:last');
  $('#myTable tr:last input').val("");
  $('#myTable tr:last input:first').focus();        
}

オートコンプリート スクリプト:

$().ready(function() {
  $("#product_title").autocomplete(products, {
    width: 380,
    matchContains: "word",
    formatItem: function(row) {
      return row.title;
    }
  });   
  $('#product_title').result(function(event, data) {
  $('#product_description').val(data.description);
  });   
});

オートコンプリートのデータは、製品のタイトルと説明を定義する単純な MySQL クエリから取得されます。

現時点では、新しい行の追加は正常に機能し、テーブルの最初の行のオートコンプリートも正常に機能しますが、追加された追加の行では機能しません。HTML テーブルに手動で 2 行目を追加しても、オートコンプリートは機能しません。

上記のコードを変更してこれを機能させる（簡単な）方法があるかどうかは誰にもわかりませんか？私はjQueryに関しては初心者なので、詳細が多いほど良い.

前もって感謝します！！！

4

3 に答える 3

6

これは、動的に追加された要素でプラグインを使用する場合によくある問題です。通常、DOM に挿入された後、新しい要素でプラグインを呼び出す必要があります。最初のページ読み込み要素と新しい要素に同じコードを複製する代わりに、通常、親要素をメイン参照として使用し、その要素内でのみプラグインを適用する要素を検索する単純なヘルパー関数を作成できます。

重要:新しい行を複製するときに ID を繰り返すことになり、定義上、ID はページ内で一意である必要があります。次のコードは、代わりに ID をクラスに変更します。マークアップで同じことを行う必要があります。

var $table;
$(function() {
     $table=$('#myTable'); 
     var $existRow=$table.find('tr').eq(1);
      /* bind to existing elements on page load*/
      bindAutoComplete($existRow);
});

function addRow(){
    var $row=$table.find('tr:last').clone(true);
    var $input=$row.find('input').val("");
    $table.append($row);
    bindAutoComplete($row );
    $input.focus();

}


function bindAutoComplete($row ){
    /* use row as main element to save traversing back up from input*/
    $row.find(".product_title").autocomplete(products, {
        width: 380,
        matchContains: "word",
        formatItem: function(row) {
            return row.title;
        }
    });
    $row.find('.product_title').result(function(event, data) {
        $row.find('.product_description').val(data.description);
    });
}
于 2012-12-01T22:05:35.837 に答える
2

clone()問題は、既にオートコンプリート プロパティを持っている要素を複製し、オートコンプリートが新しい要素に「再度」追加できないことだと思います。clone()要素の元の HTML コードを使用して、それを入れる必要があります。

編集：

修正方法：

  1. autocomplete("destroy")複製したい元の入力フィールドの場合。
  2. 要素を複製し、オートコンプリートを追加します

を使用しないclone(true)でください。ただし、使用できますclone()

于 2014-06-20T13:06:20.057 に答える
1

Charlietfl の投稿は私の問題を解決しました。

var $row=$table.find('tr:last').clone(true);

と

var $row=$table.find('tr:last').clone();を削除しtrueます。

これが他の誰かに役立つことを願っています:)

于 2012-12-02T01:37:49.513 に答える