1

問題: (jQuery) オートコンプリートは、最初の入力に対してのみ機能します (デフォルトで表示されます)。行の追加機能を使用して追加された追加の行では機能しません。

私は他の投稿を読んで、IDではなくクラスを使用する必要があることを理解しました。しかし、それでもうまくいきません。

特定のIDの行を追加および削除するためにjqueryオートコンプリートとJavaScriptを使用しています。

ヘッダーは次のとおりです。 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

jqueryコードは次のとおりです。 

jQuery(document).ready(function ($) {

  /*  availableTags = [
        "Demo",
        "Senna",
        "Adam",
        "Eva",

    ];*/

    $('.autofill').autocomplete({
        source:'suggest.php', minLength:2
    });
});

HTMLコードは次のとおりです。

    <div class="content-left">
    <a href="#" id="addScnt">Add rows</a>

        <div id="p_scents">
            <p>
                <label style="margin-bottom:10px;" for="p_scnts">
                    <input class="autofill" type="text" id="p_scnt" size="20" name="p_scnt[]"
                    value="" placeholder="Enter text" />
                </label>
            </p>
        </div>
    </div>

**Here is the Javascript to add rows:** 

$(function () {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').on('click', function () {
        $('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill"  type="text" name="p_scnt[]" size="20" id="p_scnt_' + i + '" value=""  placeholder="Add text"       /></label  for="remScnt"> <label style="padding-left:400px;"><a href="#" id="remScnt">Remove</a></label></p>').appendTo(scntDiv);
        //i++;
        //return false;

        //Added the 5 lines below

        $(function ($) {
            $('#p_scnt_' + i).autocomplete({
            source:'suggest.php', minLength:2
            });
        });
        i++;
        return false;

    });

    $('#remScnt').on('click', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

したがって、上記のコードは正常に機能しています。あなたの助けに乾杯 ;)

4

4 に答える 4

3

最新のコードでは、2つの間違いを犯しました。

  1. iテキストフィールドにオートコンプリートを適用する前に、カウンターを増やしてください
  2. によってスクリプトを停止しましたreturn false

また、バージョン1.7で非推奨になっている.on()ため、置換に使用することをお勧めします。.live()

デモ： http： //jsfiddle.net/indream/f8mt4/

$('#addScnt').on('click', function () {
    $(...).appendTo(scntDiv);
    //i++; Should not be done here
    //return false; Stopped the script

    //Added the 5 lines below

    $(function ($) {
        $('#p_scnt_' + i).autocomplete({
            source: window.availableTags,
            minLength: 1
        });
    });
    i++; // should increase counter here
    return false;

});

psavailableTagsデモを機能させるためにグローバル変数に変更しまし
たが、クエリを使用してタグを取得すると思います。

于 2013-03-10T14:55:48.740 に答える
1 
$('#addScnt').live('click', function() {
  .........................

$('#p_scnt_'+i).autocomplete({
  source:'suggest_fill.php', 
  minLength:1  
});


 return false;
  ..................
});
于 2013-03-10T12:54:14.533 に答える
0

jsファイルの読み込みの問題のシーケンスだと思います。

2番目のファイルを1番目のファイルの上に配置してみてください。

お役に立てば幸いです。

于 2013-03-10T13:08:29.713 に答える
0

2番目$(function(){は多すぎます。このように見えるはずです

<script>
$(function() {
  var scntDiv = $('#p_scents');
  var i = $('#p_scents p').size() + 1;

  $('#addScnt').live('click', function() {
    $('<p><label style="margin-bottom:10px;" for="p_scnts"><input class="autofill"  type="text" name="p_scnt[]" size="20" id="p_scnt_' + i +'" value=""  placeholder="Add text"       /></label  for="remScnt"> <label style="padding-left:400px;"><a href="#" id="remScnt"><img src="../../img/remove.jpg" width=""  height=""  class="img"  alt=""  title=""/></a></label></p>').appendTo(scntDiv);
    i++;   

    //Added the 5 lines below    

    $('#p_scnt_'+i).autocomplete({
      source:'suggest_fill.php', 
      minLength:1  
    });
  return false;
  });

  $('#remScnt').live('click', function() {
    if( i > 2 ) {
      $(this).parents('p').remove();
      i--;
    }
    return false;
  });
});
</script>
于 2013-03-10T14:19:12.933 に答える