JQuery「出現」事件

在$（document）.ready被調用後，我的應用程序向DOM添加了一些元素。我正在使用jQuery 1.9.0JQuery「出現」事件

以下示例有效。

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

不過，我要執行該功能，當元素出現在屏幕上。我在這裏看不到任何事件http://api.jquery.com/category/events/

基本上它是一個單頁面應用程序，因此文檔就緒只被調用一次，但元素在用戶與UI進行交互時進入和退出屏幕。

來源

2013-04-05 Eduard Gamonal

您如何定義「何時出現」？即當它已經加載到DOM中，或者當它已被一些其他jQuery代碼可見時？ – BenM 2013-04-05 08:30:11

或者當元素可見本身，但不在視口中，並且用戶滾動到它？ – Tommi 2013-04-05 08:30:47

對不起，我的意思是當它已經完全添加到DOM – 2013-04-05 08:51:36

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

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

，或者如果你正在逐漸把它在：

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

更新：由於@Jeff田的comment-

您需要將事件委託給最近的靜態pa租用或到document這樣的：

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

來源

2013-04-05 08:31:33 Jai

啊，我試過 $（document）.on（「ready」，「＃box-descr」，function（evt）... 您的解決方案工作。 – 2013-04-05 08:42:16

如果你追加'＃box-desc'動態記錄文件，就不能工作 – 2014-09-18 09:18:25

@JeffTian檢查EduardGamonal的第一條評論，這是你的元素動態添加到文檔中的方式 – Jai 2014-09-18 09:52:43

我覺得你問如果當作爲目標的元素添加到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-05 08:37:43

活動非常好，但是因爲對外觀沒有原生的事件，事件需要知道當項目被添加以便該事件可以被手動觸發。您可以使用輪詢來測試某些東西的外觀，並在出現時執行操作。這適用於在您的控制之外添加的內容，例如來自用戶輸入，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插件是圍繞這些技術構建，並有很多更多的選擇，像如果產品在視圖區域測試，但是如果你想要做的是測試的幾個項目被添加上述代碼比插件要快得多。

來源

2015-07-14 17:05:05

JQuery「出現」事件

回答

相關問題