jQuery - 自动完成+追加函数

我有一个页面，我想动态地添加更多的文本字段，为此我使用jQuery .append函数。不过，我也希望通过使用另一个jQuery函数来自动完成这些文本字段。下面是我有，如JavaScript：jQuery - 自动完成+追加函数

<script> 
$(document).ready(function() { 
    $("#addInputs").click(function() { 
     $("#inputList").append("<input type='text' id='autocomplete' size='35' name='sales[]' /><br />"); 
    }); 
}); 
</script> 
<script> 
$(function ac() { 
    var availableTags = [ 
    "ActionScript", 
    "AppleScript", 
    "Scheme" 
    ]; 
    $("#autocomplete").autocomplete({ 
    source: availableTags 
    }); 
}); 
</script>

我有以下HTML：

<div id='inputList'> 
    <input type='text' id='autocomplete' size='35' name='sales[]' /><br /> 
    </div> 
    <a id='addInputs' />Add Inputs</a>";

自动完成的工程，我已经显示在屏幕一旦加载页面上的文本字段。 “添加输入”也可以正常工作，并在屏幕上正确添加更多字段。

问题是这些新添加的字段不会触发自动填充功能。任何想法如何实现？

谢谢！

来源

2013-06-19 mmvsbg

问题是代码对每个附加元素使用相同的id。 ID必须是唯一的。重构代码，以便为附加到DOM的元素设置类属性。然后在调用autocomplete函数时使用该类作为选择器。

的Javascript

<script> 

     var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Scheme" 
     ]; 

     $(document).ready(function() { 
     $("#addInputs").click(function() { 
      //Adding the class 
      $("#inputList").append("<input type='text' class='autocomplete' size='35' name='sales[]' /><br />"); 

      //Selector using the class 
      $(".autocomplete").autocomplete({ 
      source: availableTags 
      }); 
     }); 
    }); 
</script>

来源

2013-06-19 09:36:58

谢谢！我现在将类ID更改为类，但是我仍然没有在新添加的字段上触发自动完成功能。 – mmvsbg

@ user2500469查看更新。对'autocomplete'的调用应该在click事件处理程序中。 –

谢谢，现在就像一个魅力！真的很感谢帮助！ – mmvsbg

一旦你添加一个新的输入元素，你需要初始化对他们的小部件。

$(function() { 

    function autocomplete(el){ 
     $(el).autocomplete({ 
      source: availableTags 
     }); 

    } 

    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Scheme" 
    ]; 

    autocomplete($("#autocomplete")) 

    $("#addInputs").click(function() { 
     var el = $("<input type='text' size='35' name='sales[]' /><br />").appendTo("#inputList"); 
     autocomplete(el) 
    }); 
});

来源

2013-06-19 09:37:07

在HTML ID属性应该包含独特的价值，而不是阶级属性，所以不是ID使用类（CLASS =“自动完成”）

来源

2013-06-19 09:38:15 Arunprabu

谢谢！不幸的是，使用类而不是id的结果是完全相同的。 – mmvsbg

我认为发生了问题，因为.autocomplete功能被绑定只有一次在DOM已经元素，我的建议是使用.live或.on绑定，后面的元素可以绑定到：

$('#autocomplete').on("focus", function(e) { 
    if (!$(this).data("autocomplete")) { 
     $(this).autocomplete({    
      source: availableTags 
     }); 
    } 
});

来源

2013-06-19 09:47:10 udidu

我的假设很相似 - append添加了新元素，但由于它们不是初始DOM的一部分，所以自动完成不会触发它们。我尝试使用.on和.live，如上所述，但目前尚未成功。 – mmvsbg

jQuery - 自动完成+追加函数

回答

相关问题