jquery-flexdatalist icon indicating copy to clipboard operation
jquery-flexdatalist copied to clipboard

flexdatalist on the fly

Open Elodrin opened this issue 7 years ago • 2 comments

Hi, many thanks for this wunderful plugin. It looks really attractive and I like the customizable funktions. Unfortunately I cannot find a trigger function or something like that to add the flexdatalist to an input field which I would like to creat on the fly by jQuery. e.g.

<div id="wrapper">
<input placeholder='Artikel Name'
       class='flexdatalist'
       data-min-length='1'
       list='languages'
       name='products[]'
       type='text'>
</div>

<datalist id="languages">
	<option value="PHP">PHP</option>
	<option value="JavaScript">JavaScript</option>
	<option value="Cobol">Cobol</option>
	<option value="C#">C#</option>
	<option value="C++">C++</option>
	<option value="Java">Java</option>
	<option value="Pascal">Pascal</option>
	<option value="FORTRAN">FORTRAN</option>
	<option value="Lisp">Lisp</option>
	<option value="Swift">Swift</option>
</datalist>

$('.flexdatalist:first').clone().appendTo('#wrapper');

It's also not working when I create the HTML code manually by not using clone(). e.g. $('#wrapper').html('<input type="text" class="flexdatalist" name="products[]" ...>')

Do you have any idea how to handle this problem? Many thanks for your help in advance!

Best regards André

Elodrin avatar Dec 18 '17 00:12 Elodrin

I came across the same problem. Did you find a way?

yohannes-taye avatar Jan 15 '18 16:01 yohannes-taye

Hi!

This is probably just a regular jQuery issue... you have to re-initialise the binding to dynamically (on the fly) created elements.

In practice, you have to do the binding again after the .clone()...

// clone
$('.flexdatalist:first').clone().appendTo('#wrapper');
// re-initialise
$('.flexdatalist:last').flexdatalist({ options... });

pdrlps avatar Jan 31 '18 12:01 pdrlps