Question

我有一个从标准flickr API中提取的图片列表，它们都列在这样的列表中：

<div id="listImgFlickr">
    <div id="jflickrwrap">
        <div class="listImgs-box">
            <div class="listImgs">
                <p style="display: none"></p>
                <a class="thickbox" href="image.jpg" rel="index"><img src="image.jpg"></a>
            </div>
        </div>
            <!-- rinse and repeat over and over -->
    </div>
</div>

我有这个jQuery脚本

jQuery("a").hover(function(){
        alert('maoe!');
})

事情是：该脚本适用于页面上的每个链接元素，但列表中的链接元素除外。另一方面，Thickbox工作正常，这意味着它可以检测链接。

所以，我已经检查了这个：

jQuery只被包含一次
生成列表的脚本位于标题
厚盒位于页脚
上面的测试脚本也在页脚上（在thickbox之后）。
我还使用mouseover，mouseenter和click测试了该脚本，并将其设置为"p"，"a.thickbox"，"img"但仍然没有。

任何线索？

Answer 1

您应该使用委派策略。将行为附加到您知道页面加载时将出现的容器元素，如下所示：

$('#listImgFlickr').on('hover','a.thickbox', function(e){ // container?
   if( e.type === 'mouseenter' ) {
     alert('over!');
   } else {
     alert('out!');
   }
});

如果动态创建#listImgFlicker，那么您需要指定其中一个父元素。

Answer 2

如果你动态添加新的“a”，你应该再次将动作绑定到“a”

Answer 3

如果您使用ajax加载这些元素，则应使用.live()代替hover()
另外，.live()从1.7开始已被弃用，因此根据您使用的jQuery版本，请考虑使用.on()。 more information here

jQuery没有检测到（几乎）某些元素上的任何事件

3 个答案: