JQuery"on appear"事件

Question

我的应用程序在调用$(document).ready之后向DOM添加了一些元素.我正在使用jQuery 1.9.0

以下示例有效.

$(document).on("click", "#box-descr", function(evt) {
    console.log("I showed up");
});

但是,我希望在元素出现在屏幕上时执行该功能.我在这里看不到任何有关此事件的事件http://api.jquery.com/category/events/

基本上它是一个单页面应用程序,因此文档就绪只被调用一次,但是当用户与UI交互时,元素会进出屏幕.

Answer 1

可能是你想要的.ready()功能:

$("#box-descr").ready(function(){
   console.log("I showed up");   
});

或者如果你正在淡化它:

$("#box-descr").fadeIn(1000, function(){
   console.log("I showed up");   
});

更新:作为@Jeff Tian的评论 -

您需要将事件委托给最近的静态父级或document类似的:

$(document).on("ready", "#box-descr", function(){
   console.log("I showed up");   
});

Answer 2

事件很好但是因为没有外观的本机事件,事件需要知道何时添加项目以便可以手动触发事件.您可以使用轮询来测试某些内容的外观,并在出现时执行操作.这适用于在控件之外添加的内容,例如来自用户输入,ajax或其他程序.

setInterval(function() {
    $('.my-element-class:not(.appeared)')
        .addClass('appeared')
        .each(function() {
            console.log("here I am!")
        });
}, 250);

这将按类名(或您提供的任何其他选择器条件)检查元素的外观,每秒4次,并在出现新项时运行代码.一旦看到项目,就会添加.appeared类以防止再次检测到该实例.如果您只想测试一个外观,则可以简化并在检测后关闭轮询.

var testAppearTmr = setInterval(function() {
    if ($('.my-element-class').length) {
        clearInterval(testAppearTmr);
        console.log("here I am!")
    }
}, 250);

jQuery 似乎插件是围绕这些技术构建的,并且有很多选项,比如项目是否在视图区域中的测试,但是如果你想要做的就是测试添加到dom的几个项目,上面的代码是比一个插件更节俭.