動態新行上的jQuery自動完成

Question

問題：（jQuery）自動完成僅適用於第一個輸入（默認顯示）。它不適用於使用添加行函數添加的其他行。

我已閱讀其他帖子，並瞭解我必須使用類而不是id。但它仍然不起作用。

我正在使用jQuery自動完成和一些JavaScript來添加和刪除特定ID的行。

這裏是標頭：

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

所以上面的代碼工作正常。歡呼所有的幫助;）

Answer 1

爲了您最新的代碼，你已經犯了兩個錯誤：

1. 增加計數器i之前使用自動完成文本字段
2. 通過return false
停止腳本

此外，建議使用.on()來取代.live()，因爲它在版本1中已被棄用。 7。

演示：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; 

}); 

附：我已將availableTags更改爲全局變量，以使演示生效，
但我認爲您會使用查詢來檢索標記。

Answer 2

$('#addScnt').live('click', function() { 
    ......................... 

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


return false; 
    .................. 
}); 

Answer 3

我認爲這是js文件加載問題的序列。

嘗試將第二個文件放在第一個文件的上方。

希望它可以幫助你。

Answer 4

第二個$(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>