I have a page where I want to dynamically add more text fields and for this purpose I'm using the jQuery .append function. However, I also want to have those text fields being autopleted by using yet another jQuery function. Here's what I have as JavaScript:

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

I have the following HTML:

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

The autoplete works for the text field that I already have displayed on the screen once the page loads. The "Add Inputs" also works and correctly appends more fields on the screeen.

The problem is that those newly added fields do not trigger the autoplete function. Any ideas how this could be achieved?

Thank you!

I have a page where I want to dynamically add more text fields and for this purpose I'm using the jQuery .append function. However, I also want to have those text fields being autopleted by using yet another jQuery function. Here's what I have as JavaScript:

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

I have the following HTML:

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

The autoplete works for the text field that I already have displayed on the screen once the page loads. The "Add Inputs" also works and correctly appends more fields on the screeen.

The problem is that those newly added fields do not trigger the autoplete function. Any ideas how this could be achieved?

Thank you!

• javascript
• jquery

Share Improve this question Follow asked Jun 19, 2013 at 9:34 mmvsbgmmvsbg 3,5881717 gold badges5454 silver badges7474 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

The issue is that the code uses the same id for every appended element. Ids must be unique. Refactor the code so that it sets a class attribute on the elements appended to the DOM. Then use the class as the selector when you call the autoplete function.

Javascript

<script>

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

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

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

try this :

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

on my site works. ;)

Once you add a new input element you need to initialize the widget on them.

$(function () {

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

    }

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

    autoplete($("#autoplete"))

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

In HTML ID attribute should contain unique value, but not CLASS attribute so instead of id use class (class = "autoplete")

I think that the problem occurred because of the .autoplete function is binded just once for the elements already in the DOM, my suggestion is using the .live or .on binding so later elements can be binded to:

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