Jquery .hide() Doesn't Run On Dynamically Created Elements

I want to dynamically create some div elements in my container. I do it with simple function: function myFunction(volume){ for(var i = 1; i<= volume; i++){ $('.container').appen

Solution 1:

you should use event delegation for that

$(".container").on("mouseenter","div",function(e){

});

Event delegation allows you to attach a single event listener, to a parent element, that will fire for all children matching a selector, whether those children exist now or are added in the future.

Solution 2:

Use .onchange() instead of onclick in the option

$('select').on('change',function(){
myFunction(this.value);
});

also add value to the options

<optionvalue="4" >4</option>

You'll also need to use event-delegation on dynamically added elements

$(document).on('mouseenter','div',function() {

DEMO

Solution 3:

UPDATE

The question was updated so

$(".container").on("mouseenter","div",function(e){
   if (run){
       $(this).hide(3000, function() {
          result++;
          run = false;
          rewrite();
       });
   }
});