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 appear插件是围绕这些技术构建的，并且有很多选项，例如测试项目是否在视图区域中，但是如果您想要做的就是测试是否添加了一些项目对于dom，上面的代码比插件更节俭。

Answer 3

我认为您在询问是否可以在将目标元素添加到DOM时触发事件。如果这不是你想要的，请告诉我。

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

// Later in your code you add the element to the DOM
$('<div />', { id : 'box-descr' }).appendTo('body');

// Then trigger the click event for the added element 
$('#box-descr').trigger('click');

希望这就是你要找的东西

您可以将此缩短为

$('<div />', { id : 'box-descr' }).appendTo('body').trigger('click');

JQuery“on appear”事件

3 个答案: