Can't listen to cloned keyup inputs

Question

Sorry if this is basic.

After reading here i changed :

 $('input,textarea').keyup(function()

to

$('input,textarea').on('keyup', function()

On my cloned element :

   var cln = item.cloneNode(true); //true

and i can only listen to divs that where in my document on load, not the ones who cloned later.

I have also tried :

   var cln = item.cloneNode(true, true);

after reading this : jQuery clone() not cloning event bindings, even with on()

score 1 · Accepted Answer · answered Aug 24 '19 at 04:41

If you append the cloned element to the .container, Try

$('.container').on('keyup', 'input,textarea', function(){...

Demo:

$('.container').on('keyup', 'input,textarea', function(){
  console.log(this.value);
});

//var cln = item.cloneNode(true); //true
$('input').clone().appendTo('.container');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <input />
  <textarea>Hi</textarea>
</div>

thanks a lot. but how can i clone with events in js ? – hkrly Aug 24 '19 at 04:50 — hkrly, Aug 24 '19 at 04:50

Can't listen to cloned keyup inputs

1 Answers1