jquery not selecting the expected div element.

Programming i html: jquery not selecting the expected div element. on newest questions tagged html – Stack Overflow

Evening,

I’m a bit confused about why some of my jquery isn’t working.

Here’s a proof of example:
http://jsfiddle.net/FS34t/624/

As you can see, clicking on a ‘box’ triggers that alert.

However, when I attempt to implement this same behaviour into my own code, clicking a ‘box’ won’t trigger.

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

I’m unsure of why

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

Won’t work here.
My only guess is that it’s because in the jsfiddle example, the ‘boxes’ are declared in the HTML, whereas these are generated in the .js?

source: http://stackoverflow.com/questions/11424903/jquery-not-selecting-the-expected-div-element
Programming i html: programming-i-html