jQuery .hide() doesn't run on dynamically created elements

Question

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').append("<div></div>");
}

The problem is that generated div elements does NOT react to my jQuery .hide() function. Does anyone know why it is not working? HTML looks fine for both manualy and dynamically created elements.

I did jsfiddle, but it is kinda broken too: http://jsfiddle.net/gQBen/

My call of .hide() function

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

Aron solve it in comments: http://jsfiddle.net/arunpjohny/SM38C/1/ thanks!

how do you call the hide function? – Merlin Mar 24 '14 at 14:31 — Merlin, Mar 24 '14 at 14:31
delegate the mouseenter to the container – Huangism Mar 24 '14 at 14:31 — Huangism, Mar 24 '14 at 14:31
see http://jsfiddle.net/arunpjohny/SM38C/1/ – Arun P Johny Mar 24 '14 at 14:35 — Arun P Johny, Mar 24 '14 at 14:35
Thank you Arun P Johny, you are right, that is what I want – Jakub Closed Mar 24 '14 at 14:48 — Jakub Closed, Mar 24 '14 at 14:48

score 3 · Accepted Answer · answered Mar 24 '14 at 14:31

3

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.

answered Mar 24 '14 at 14:31

Anoop Joshi P

25,373
8
32
53

1

In this particular case, the event can be attached to the .container div instead – Huangism Mar 24 '14 at 14:32

score 0 · Answer 2 · answered Mar 24 '14 at 14:32

0

Use .onchange() instead of onclick in the option

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

also add value to the options

<option value="4" >4</option>

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

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

DEMO

answered Mar 24 '14 at 14:32

Anton

32,245
5
44
54

works for jsfiddle(apparentl yin your demo), but not not working for calling .hide function (in your demo to) – Jakub Closed Mar 24 '14 at 14:36

Merlin · Answer 3 · 2014-03-24T14:45:08.067

-1

UPDATE

The question was updated so

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

edited Mar 24 '14 at 14:45

answered Mar 24 '14 at 14:33

Merlin

4,907
2
33
51

jQuery .hide() doesn't run on dynamically created elements

3 Answers3

Linked