jQuery行が動的に追加されたときにオートコンプリート機能を使用する方法

Question

動的に追加された行に入力フィールドをオートコンプリートしようとしています。しかし、それはUncaught TypeError: $(...).autocomplete is not a functionのエラーを投げます。

参考：http://jsfiddle.net/r08m8vvy/2/

HTML

<div class="section-content trip-content" > 
    <div class="row"> 
     <form class="cn-form form-horizontal " onsubmit="return false" role="form" data-listing-id=""> 
      <input type="hidden" name="trip_id" value=""> 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 trip-details"> 
       <div class="col-md-4 col-xs-12 trip-details-mobile"> 
        <input type="text" name="" placeholder="Trip ID" class="form-control consigner-trip-id" id="consignerTripDetails" autofocus> 
       </div> 
       <div class="col-md-4 col-xs-12 trip-details-mobile"> 
        <input type="text" name="vehicle_no" placeholder="Vehicle No" class="form-control" readonly> 
       </div> 
       <div class="col-md-4 col-xs-12 trip-details-mobile"> 
        <input type="text" name="load_type" placeholder="Load Type" class="form-control" readonly> 
       </div> 
      </div> 

      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 trip-details"> 
       <div class="col-md-12 col-xs-12 trip-details-mobile"> 
        <textarea type="text" name="loading_supervisor" placeholder="Loading Supervisor" class="form-control" readonly></textarea> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

jQueryの

$("#addTripRows").click(function (e) { 
    e.preventDefault(); 
    var tripDetailHTML = '<div class="row"><form class="cn-form form-horizontal" onsubmit="return false" role="form" data-listing-id=""><input type="hidden" name="trip_id" value=""><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 trip-details"><div class="col-md-4 col-xs-12 trip-details-mobile"><input type="text" name="" placeholder="Trip ID" class="form-control consigner-trip-id" id="consignerTripDetails" autofocus></div><div class="col-md-4 col-xs-12 trip-details-mobile"><input type="text" name="vehicle_no" placeholder="Vehicle No" class="form-control" readonly></div><div class="col-md-4 col-xs-12 trip-details-mobile"><input type="text" name="load_type" placeholder="Load Type" class="form-control" readonly></div></div><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 trip-details"><div class="col-md-12 col-xs-12 trip-details-mobile"><textarea type="text" name="loading_supervisor" placeholder="Loading Supervisor" class="form-control" readonly></textarea></div></div></form><button class="remove_field v2-button">Remove</button></div>'; 
    if(x < max_fields){ //max input box allowed 
     x++; //text box increment 
    $(wrapper).append(tripDetailHTML); 
    $("input[id="+ x +"]").autocomplete({ 
    source: availableAttributes 
    }); 
    } 
}); 

$(wrapper).on("click",".remove_field", function(e){ 
    e.preventDefault(); 
    $(this).parent('div').remove(); 
    x--; 
}); 

すべてのヘルプは素晴らしいことです。前もって感謝します。

Answer 1

jQuery.min.jsの前にjQuery-ui.min.jsの前に参照してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

jQuery-ui.min.jsは、Jqueryフレームワークに依存しています。

Answer 2

まず、あなたはここでhttp://jsfiddle.net/r08m8vvy/140/

In the above jsfiddle I've removed the jQuery-ui, check the console. 

はあなたが両方CSS & JavaScript

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

の順を確認してください追加ソリューション

You are missing jQuery-ui library 

で行く同様の問題に行きますフィル同じでなければなりません。

希望すると、これが役立ちます。