Question

晚上，

我有点困惑为什么我的一些jquery没有工作。

以下是示例的证明： http://jsfiddle.net/FS34t/624/

如您所见，点击“＆＃39;框”＆＃39;触发警报。

但是，当我尝试在我自己的代码中实现相同的行为时，请点击“＆＃39;”框。不会触发。

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例子中，＆＃39;框＆＃39;在HTML中声明，而这些是在.js中生成的？

Answer 1

如果您运行此代码：

 $(".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()。

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

1 个答案: