Question

我想在容器中动态创建一些div元素。我用简单的功能做到了：

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

问题是生成的div元素不会对我的jQuery .hide（）函数做出反应。有谁知道它为什么不起作用？ HTML对于manualy和动态创建的元素都很好。

我做了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

更新

问题已更新，

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

jQuery .hide（）不会在动态创建的元素上运行

3 个答案: