13

在调用 $(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 交互时进出屏幕。

4

3 回答 3

15

可能是你想要的.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");   
});
于 2013-04-05T08:31:33.987 回答
10

事件很好，但由于没有用于外观的本机事件，事件需要知道何时添加项目，以便可以手动触发事件。您可以使用轮询来测试某物的外观并在它出现时执行操作。这对于添加到您无法控制的内容（例如来自用户输入、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 的一些项目，上面的代码是比插件更省钱。

于 2015-07-14T17:05:05.940 回答
1

我认为您是在问是否可以在将目标元素添加到 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');
于 2013-04-05T08:37:43.463 回答