jQuery .hide() не работает на динамически создаваемых элементах

Question

Я хочу динамически создавать некоторые элементы div в моем контейнере. Я делаю это с простой функцией:

function myFunction(volume){ 
for(var i = 1; i<= volume; i++){ 
$('.container').append("<div></div>"); 
} 

Проблема заключается в том, что сгенерированные элементы DIV не реагирует на мой JQuery .hide функции(). Кто-нибудь знает, почему он не работает? HTML отлично подходит как для ручных, так и для динамически создаваемых элементов.

я jsfiddle, но это своего рода сломаны тоже: http://jsfiddle.net/gQBen/

Мой вызов .hide функции()

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

Aron решить в комментариях: http://jsfiddle.net/arunpjohny/SM38C/1/ спасибо!

Answer 1

вы должны использовать event delegation для этого

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

}); 

делегации событий позволяет присоединять один слушатель событий, чтобы родительский элемент, который будет срабатывать для всех детей, соответствующих селектор, существуют ли теперь эти дети или добавлено в будущем.

Answer 2

Использование .onchange() вместо OnClick в опции

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

также добавить значение опции

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

Вам также необходимо использовать событие делегирования динамически добавляемых элементов

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

DEMO

Answer 3

UPDATE

Вопрос был обновлен так

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