Cloned autocomplete input not working

Question

I have a problem with jQuery function clone(). I think the problem is in the withDataAndEvents input parameter of this method.

Initially, I'm coding a table that has dynamic rows. I'm adding dynamically rows when clicking on a button put only in the first row. the first row contains initially many inputs fields and combo-boxes. Each field is initalized by an ajax call. And each action on a field leads to the refresh (filtering) on the whole fields of a row. I'm also using autocomplete on input fields.

The first row works perfectly. However, when cloning the tag:

1. If I did not enter values in the first row, the cloned and first row work fine
2. If I enter a value or values in first row fields and after I clone the , only the first row fields still work. In this case, if I try to change the value of the combo-boxe (which fire a change event for all concerned row fields), the fields of the first row are impacted despite using Ids when changing autocomplete data. Ids of fields, combo-boxes, table rows are dynamically created when clicking on the button to clone the widget.

The code I wrote is too long so I created a fiddle and simplified the case and still have the same problem.

I tried many suggestions that I've found like this, this one or this one in vain :-( (data.('autocomplete', null), autocomplete("destroy") ...)

Do you have ideas about this issue ?

thanks in advance

Answer 1

Aside from the typo in the test (you are selecting by class instead of the new element by id), the basic problem is you are applying autocomplete before you add it to the DOM.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/87jcw1y0/2/

I just reversed the order of these two lines:

$('.body').append(clone);
applyAutoComplete2('#myinput' + inc);

The cause... Some plugins use storage data associated with the DOM element, or attach events to ancestors etc. None of these can happen with a disconnected DOM element, so just attach it to the DOM first.