如何在div準備好後調用函數？

我在我的JavaScript文件如下：如何在div準備好後調用函數？

var divId = "divIDer"; 

jQuery(divId).ready(function() { 
    createGrid(); //Adds a grid to the html 
});

的HTML看起來像：

<div id="divIDer"><div>

但有時實際被加載到頁面上，我的分頻器之前我createGrid（）函數被調用。那麼當我嘗試呈現我的網格時，它無法找到指向的合適div並且不會呈現。我的div完全可以使用後，如何調用函數？

編輯：

我使用ExtJS的加載在div：

var tpl = new Ext.XTemplate(
'<div id="{divId}"></div>'); 

tpl.apply({ 

});

來源

2013-06-12 Grammin

如何加載你的div？使用ajax？ –

DIVs沒有準備好的事件 –

我想''jQuery（divId）'從來沒有找到任何東西，你錯過了ID選擇器'＃' – tymeJV

您可以使用遞歸來這裏做這個使用做好準備。例如：

jQuery(document).ready(checkContainer); 

function checkContainer() { 
    if($('#divIDer').is(':visible'))){ //if the container is visible on the page 
    createGrid(); //Adds a grid to the html 
    } else { 
    setTimeout(checkContainer, 50); //wait 50 ms, then try again 
    } 
}

基本上，此功能將檢查以確保元素存在並且可見。如果是，它將運行您的createGrid()函數。如果不是，它將等待50ms，然後再試一次。

注意::理想情況下，您只需使用AJAX調用的回調函數來知道何時添加容器，但這是一種蠻力，獨立的方法。 :)

來源

2013-06-12 17:42:33

我加載了iframe上的五個頁面上一個，其中一個頁面是谷歌地圖地理編碼，我打電話功能on window onload geocode地址，但該函數在iframe中第一頁加載時觸發，我嘗試了document.ready，wind.load，if（$（div）.is（：visible）），但是每一件事都在第一頁觸發加載在iframe上，當我們點擊下3次然後googlemap轉過來時googlemap是在第三位！ - –

嘿@Mohit，我認爲最好能讓你真的在新的問題中展示你的代碼。評論背景下太難遵守。如果你在這裏鏈接你的新問題，我會遵循它，看看我能否提供幫助。 :) –

至此，「聽」上DOM事件，如插入或修改元素的唯一途徑，就是用這種叫做的突變事件。例如

document.body.addEventListener('DOMNodeInserted', function(event) { 
    console.log('whoot! a new Element was inserted, see my event object for details!'); 
}, false);

進一步閱讀上：MDN

與突變事件問題是（是），他們從來就不是他們的方式進入，因爲inconcistencies和材料的任何官方規格。過了一段時間，這個事件在所有現代瀏覽器中都實現了，但是他們被宣佈爲棄用，換句話說你不想使用它們。

官方更換爲突變事件是MutationObserver()對象。

進一步閱讀上：MDN

目前的語法看起來像

var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation.type); 
    }); 
}); 

var config = { childList: true }; 

observer.observe(document.body, config);

此時，該API已經在新的Firefox，Chrome和Safari瀏覽器版本中實現。我不確定IE和Opera。所以這裏的權衡是絕對的，你只能針對topnotch瀏覽器。

來源

2013-06-12 17:36:42 jAndy

我真的覺得更多的人應該使用這個，尤其重要的是，當涉及到ajax調用 –

通過jQuery.ready函數，您可以指定在加載DOM時執行的函數。整個DOM，不是你想要的任何div。

所以，你應該有點不同的方式

$.ready(function() { 
    createGrid(); 
});

這是在情況下，當你不使用AJAX來加載DIV

來源

2013-06-12 17:37:48

您<div></div>元素裏，你可以調用$(document).ready(function(){});執行命令，像

<div id="div1"> 
    <script> 
     $(document).ready(function(){ 
     //do something 
     }); 
    </script> 
</div>

，你可以做同樣的，你有其他的div。這是適合的，如果你通過局部視圖加載你的div

來源

2016-06-09 09:07:06

這是一個正義的黑客。我認爲你沒有保修。我正在使用這個。 –

在功能的某些div加載後做些什麼。我認爲這正是你需要的：

$('#divIDer').load(document.URL + ' #divIDer',function() { 

     // call here what you want ..... 


     //example 
     $('#mydata').show(); 
    });

來源

2018-01-10 14:15:01

如何在div準備好後調用函數？

回答

相關問題