0

晚上，

我对为什么我的一些 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 示例中，“盒子”是在 HTML 中声明的，而这些是在 .js 中生成的？

4

1 回答 1

2

如果您运行此代码：

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

在.box创建元素并将其插入 DOM 之前，将不会安装任何事件处理程序，因为$(".box")在运行代码时在 DOM 中找不到要安装处理程序的对象（导致空的 jQuery 对象）。

您有两个选择来纠正这个问题：

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

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

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

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

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

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

于 2012-07-11T02:59:42.647 回答