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()。