jQuery Mobile 初期化事件有mobileinit,pagebeforecreate,pagecreate,pageinit這個4個事件。本文嘗試總結和比較4個事件。
事件觸發順序第一個觸發的事件是mobileinit，其次pagebeforecreate，再次pagecreate，最後pageinit。
mobileinit -> pagebeforecreate -> pagecreate -> pageinit。
jQuery mobile載入時最先觸發的事件。
綁定此事件的JS代碼，應該在jQuery之後，jQuery mobile之前。
<script src="jquery.js"></script><script>$(document).live('mobileinit',function(event){// ....});</script><script src="jquery.mobile-1.0.1.min.js"></script> |
因為Document還沒有加入到DOM樹中，mobileinit事件中對html的操作時徒勞的。
如下面的例子
<!DOCTYPE html><html><head><metahttp-equiv="content-type"content="text/html; charset=UTF-8"><metacharset="UTF-8"><title>jQuery mobile API</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"/><scriptsrc="http://code.jquery.com/jquery-1.6.4.min.js"></script><script>$("#page0").live('mobileinit',function(event){ $('ul').attr('data-role', 'listview'); }); </script><scriptsrc="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script><body><divdata-role="page"id="page0"><divdata-role="header"data-theme="b"><h3>歡迎訪問PG99.NET</h3></div><divdata-role="content"data-theme="c"><ul><li><ahref="#">LI1</a></li><li><ahref="#">LI2</a></li><li><ahref="#">LI3</a></li></ul></div><divdata-role="footer"data-theme="a"><h3>歡迎訪問PG99.NET</h3></div></div></body</html> |
上面的例子，想在ul標籤中加入data-role=”listview”的屬性。結果是讓人失望的。
pagebeforecreate頁面的DOM載入後，DOM初始化之前 觸發的事件。
ntent="text/html; charset=UTF-8"><metacharset="UTF-8"><title>jQuery mobile API</title><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"/><scriptsrc="http://code.jquery.com/jquery-1.6.4.min.js"></script><script>$("#page0").live('pagebeforecreate',function(event){ $('ul').attr('data-role', 'listview'); }); </script><scriptsrc="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script><body><divdata-role="page"id="page0"><divdata-role="header"data-theme="b"><h3>歡迎訪問PG99.NET</h3></div><divdata-role="content"data-theme="c"><ul><li><ahref="#">LI1</a></li><li><ahref="#">LI2</a></li><li><ahref="#">LI3</a></li></ul></div><divdata-role="footer"data-theme="a"><h3>歡迎訪問PG99.NET</h3></div></div></body</html> |
這個事件，在HTML已經在DOM中建立完成，初始化也完成，但在展開widget之前觸發的事件。
pageinit展開完成後觸發的事件。是jQuery mobile中的$(document).ready()。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
