Ajax search inside jquery div clone

Question

I have a search in an input that returns the result in ajax, type autocomplete that is working (when I type 3 first digits it shows the results), but when I put this input inside a div "clone" (jquery) it does not work the search and returns no results...

I put the code in jsfiddle: https://jsfiddle.net/g9dehL8j/2/

Answer 1

The problem is that when you use $("#produto").keyup(function(){ the event handset is only listening to events in the element #produto which already existed when the page was loaded. In this case, and as Lucas also pointed out, you cannot use ID because on the page there can only be one element with each ID.

If you use that delegated event, and bringing them together #engloba-template and #conteudo_engloba could turn out like this:

$('#engloba-template, #conteudo_engloba').on('keyup', 'input[name="produto[]"]', function() {

jsFiddle: https://jsfiddle.net/g9dehL8j/3/

Answer 2

When you clone it is understandable to repeat the idin your case. Try to make the selection by any property:

HTML

<input type="text" autocomplete="off" id="produto" produto name="produto[]">
                                                   ^^^^^^^

JS

$("input[produto]").keyup(function(){ });