將事件綁定到出現的div

Question

我可以創建一個事件，以便每當具有特定ID的元素變得可見或出現在頁面上時，都可以執行一些javascript嗎？

該元素來自一個遠程資源（所以不在我的html代碼中，而是出現在頁面加載中），我希望在代碼出現時可以運行一些代碼（並且只有在出現時，它才不會在每次加載時都出現）。

謝謝！

Answer 1

如果選擇器找不到匹配項，它將不會運行，因此只需要這樣的代碼即可：

 $("#elementID").each(function() {
   //do something
 });

只需在加載ID的任何代碼中運行該語句，或者以這種方式加載它即可在ajax處理程序中進行裝配：

$.ajaxSetup({
   complete: function() {
    $("#elementID").each(function() {
     //do something
    });
   }    
 });

Answer 2

您可以使用live（）方法：

$('div_id_or_class').live('click', function(){
 // ................
});

Answer 3

您可以創建一個函數，每隔X毫秒檢查一次此元素是否出現在頁面上（純Javascript解決方案）：

(​function ()​ {
    var intervalId = window.setInterval(function() {
        if (null != document.getElementById('myDivId')) {
            // the div appeared on the page
            // ... do your stuff here:
            alert('its here!');

            // optionally stop checking (obviously it's there already 
            // unless you decide to remove it)
            window.clearInterval(intervalId);
        };
    }, 100); // perform check every 100 milliseconds
}​)()​;

DIV可能一直存在，只是不可見。 因此，您的檢查功能應該有所不同：

var el = document.getElementById('myDivId');
if (null != el && (el.offsetWidth > 0 || el.offsetHeight > 0)) {

基本上(el.offsetWidth > 0 || el.offsetHeight > 0)表示該元素未被(el.offsetWidth > 0 || el.offsetHeight > 0)元素的CSS屬性隱藏。