Javascript jquery未选择所需的div元素。

晚上,

我有点困惑为什么我的一些jquery不能工作

下面是一个例子：

如您所见，单击“框”会触发该警报

然而，当我试图在自己的代码中实现相同的行为时，单击“框”不会触发

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>'
);

在这里不行。 我唯一的猜测是，这是因为在jsfiddle示例中，“box”是在HTML中声明的，而它们是在.js中生成的

如果运行此代码：

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

在创建

.box

元素并将其插入DOM之前，不会安装任何事件处理程序，因为运行代码时，

$（“.box”）

在DOM中找不到要安装处理程序的对象（结果是空的jQuery对象）

您有两种选择来更正此问题：

您可以切换到使用委托事件处理，以便将来创建的对象将响应事件

可以在创建给定的

.box

元素后安装事件处理程序

委托事件处理（在jQuery 1.7+中）的工作方式如下：

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

这会将一个事件处理程序附加到$container对象（在创建球之前已经存在）上，然后该对象会监视源自

.box

对象的冒泡事件

---

对于jQuery 1.7之前的jQuery版本，您可以使用

.delegate（）

您应该确保在创建元素后设置单击处理程序。这两个答案都有效。哪一个更好用呢？这一个最好！我要删除我的答案。如果您在JSFIDLE中使用jquery 1.4.2，则应该使用.delegate（）函数。

.live（）

已被弃用，不应再使用。仅供将来验证。如果我想用“box”类制作一个盒子。但是，假设我有一个id为“special”的特殊框，我如何调整您给出的答案以适应行为，只选择特殊id框？（假设我有所有这些框，并且有一个框在单击时会发出警报）@Adola-

。on（）

的第二个参数是您希望它匹配的选择器，以将事件应用于这些对象。如果所需元素上有

id=“special”

，则可以在第二个参数中使用

“#special”

作为选择器，而不是

”.box“

。在第二个参数中，它只是一个普通的jQuery选择器。

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