我想在動態添加的行上自動完成輸入字段。但它會拋出一個錯誤Uncaught TypeError: $(...).autocomplete is not a function。jQuery如何動態添加行時使用自動完成功能

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--; 
});

任何幫助將是巨大的。提前致謝。

來源

2017-10-16 Tanmoy Sarkar

請添加您的html標記，包括腳本引用。很可能你在JQuery.js之前引用了JQuery-UI.js –

你的小提琴完美工作。 –

@ Alexandru-IonutMihai是啊，我用什麼小提琴作爲參考。 –

請確保您參考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框架。

來源

2017-10-16 10:04:29

首先，你去與類似的問題http://jsfiddle.net/r08m8vvy/140/

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

在這裏，你去與解決方案

You are missing jQuery-ui library

添加兩個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>

確認的順序FIL es應該是一樣的。

希望這會幫助你。

來源

2017-10-16 10:20:07 Shiladitya

@ shailaditya同樣的錯誤。 –

@TanmoySarkar請分享你的所有庫文件鏈接。我們絕對會幫助你。 – Shiladitya

@ shailaditya它工作正常，如果行沒有動態添加。但在添加另一行時發生錯誤。我已添加圖片片段，請檢查。 –

jQuery如何動態添加行時使用自動完成功能

HTML

jQuery的

回答

相關問題