jquery没有选择预期的div元素。

Question

傍晚，

我有些困惑，为什么我的一些jQuery不工作。

这里的例子证明： http://jsfiddle.net/FS34t/624/

正如你可以看到，点击一个“盒子”将触发警报。

但是，当我尝试将相同的行为实现到我自己的代码中时，单击“框”不会触发。

function scroll(e) { 
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) { 
    var $items = $(balls());        
    $items.imagesLoaded(function(){ 
     $container 
     .masonry('reloadItems') 
     .append($items).masonry('appended', $items, true); 
    }); 
} 
} 
function balls(){ 
$iterator -= 1; 
if($iterator < 0){ 
    var $boxes = $('<div class="box">No more games!</div>'); 
    $container.append($boxes).masonry('appended', $boxes, false); 
    return; 
} 
var $width = 9; 
return (
    '<div class="box" style="width:18%">' 
    +'<p>'+$test[$iterator][1][2]['name']+'</p>' 
    +'<img src="scripts/php/timthumb.php?src='+$test[$iterator][2]+'&q=100&w=300"/>' //Replace this with the one below when timthumb is whitelisted 
    +'<div id=boxBottom>'+Math.floor($test[$iterator][0]*100)+'%</div>' 
    +'</div>' 
); 

我不确定为什么

$(".box").click(function(event){ 
    alert("TEST"); 
}); 

不会在这里工作。 我唯一的猜测是，这是因为在jsfiddle示例中，'boxes'是在HTML中声明的，而这些是在.js中生成的？

Answer 1

如果你运行这段代码：中创建和DOM中插入.box元素之前

$(".box").click(function(event){ 
    alert("TEST"); 
}); 

，那么没有事件处理程序将被安装，因为$(".box")发现在一个空的jQuery在DOM中没有对象（结果对象）在您运行代码时安装处理程序。

你有两个选择来纠正这一点，

1. 您可以切换到使用委派的事件处理，以便在未来创建的对象会响应事件。

2. 您可以在创建给定的.box元素后安装事件处理程序。

委托事件处理（jQuery中1.7+）将这样的工作：

$container.on("click", ".box", function(event){ 
    alert("TEST"); 
}); 

这附加的事件处理程序到$容器对象（被创建之前，球已经存在），然后观看源自.box对象的冒泡事件。

对于jQuery 1.7之前版本的jQuery，您可以使用.delegate()。