JQuery“出现”事件

JQuery "on appear" event

提问by Eduard Gamonal

My application adds some elements to the DOM after $(document).ready has been called. I'm using jQuery 1.9.0

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

The following example works.

以下示例有效。

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

However, I want to execute that function when the element appears on screen. I couldn't see any event for this purpose here http://api.jquery.com/category/events/

但是，我想在元素出现在屏幕上时执行该功能。我在这里看不到任何用于此目的的事件http://api.jquery.com/category/events/

Basically it's a single page application, so document ready is called only once but elements come in and out of the screen as the user interacts with the UI.

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

回答by Jai

May be you want .ready()function :

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

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

or if you are fading it in :

或者如果你正在淡出它：

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

---

---

Update: As @Jeff Tian's comment-

更新：正如@Jeff Tian的评论-

You need to delegate event to the either closest static parent or to the documentlike this:

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

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

回答by d'Artagnan Evergreen Barbosa

Events are nice but because there is no native event for appearance, events require knowing when an item is added so that the event can be manually triggered. You can use polling to test for the appearance of something and do an action when it appears. This works great for content that is added outside your control, such as from user input, ajax, or other programs.

事件很好，但由于没有用于出现的本机事件，事件需要知道何时添加项目，以便可以手动触发事件。您可以使用轮询来测试某物的外观并在它出现时执行操作。这对于添加到您控制之外的内容非常有用，例如来自用户输入、ajax 或其他程序。

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

This will check for the appearance of an element by class name (or any other selector criteria you supply) 4 times each second and run the code when a new item appears. Once an item is seen the .appeared class is added to prevent that instance from being detected again. If you only want to test for one appearance you can simplify thusly and close down the polling after detection.

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

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

The jQuery appearplugin is built around these techniques and has a lot more options, like tests for if the item is in the view area, but if all you want to do is test for a few items being added to the dom the above code is much thriftier than a plugin.

jQuery出现插件是围绕这些技术构建的，并且有更多选项，例如测试项目是否在视图区域中，但如果您只想测试添加到 dom 的几个项目，则上面的代码是比插件节俭得多。

回答by David Barker

I think that you're asking if you can trigger the event when the targetted element is added to the DOM. Let me know if this isn't what you want.

我认为您是在问是否可以在将目标元素添加到 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');

Hope that is what you're looking for

希望这就是你要找的

You can shorten this to

您可以将其缩短为

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