{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/post/how-to-treat-ready-event-in-jq-mobile/",
    "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"9ab813fd-f9af-538f-9383-1dd76d960351","excerpt":"こんにちは。 jQueryMobileの1.2でwebアプリの開発を行なっているときに、 独自のJavaScriptを書く必要があったので、jQueryのように という風に書けばいいのかと思ったら、見事にハマったので対応策をメモします。 jQueryMobile…","html":"<p>こんにちは。 jQueryMobileの1.2でwebアプリの開発を行なっているときに、 独自のJavaScriptを書く必要があったので、jQueryのように</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function\">$</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// write your program here.</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span></code></pre></div>\n<p>という風に書けばいいのかと思ったら、見事にハマったので対応策をメモします。</p>\n<!--more-->\n<h2 id=\"jquerymobileのページ初期化について\" style=\"position:relative;\"><a href=\"#jquerymobile%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E5%88%9D%E6%9C%9F%E5%8C%96%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6\" aria-label=\"jquerymobileのページ初期化について permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>jQueryMobileのページ初期化について</h2>\n<p>ページ初期化以外の説明についてはこのエントリでは省略します。</p>\n<blockquote>\n<p>重要：$(document).ready()ではなく pageinit() を使う</p>\n<p>jQueryを学んで最初に覚えることは、コードを $(document).ready() に記述することでしょう。<br>\nDOMが読み込まれ使用可能になると、この関数は真っ先に呼ばれます。しかしながらjQuery Mobileにおいては、Ajaxによって各ページが読み込まれてコンテンツがDOMに追加されます。<br>\nそのため、DOMの ready ハンドラはサイトの最初のページを開いた時にしか呼ばれません。<br>\n新しいページが読み込まれた際に毎回実行したい場合、その処理は pageinit イベントにバインドしてください。</p>\n<p><span class=\"removed_link\" title=\"http://dev.screw-axis.com/doc/jquery_mobile/api/events/\">イベント | jQuery Mobile 1.1.0 日本語リファレンス</span></p>\n</blockquote>\n<p>とあるように、jQueryMobileでは$(function(){});ではなく、 <strong>pageinit</strong>というハンドラで制御します。</p>\n<h2 id=\"pageinitのサンプル\" style=\"position:relative;\"><a href=\"#pageinit%E3%81%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB\" aria-label=\"pageinitのサンプル permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>pageinitのサンプル</h2>\n<p>pageinitを使ったコードはこのようになります。 なお、jQueryのバージョンは1.8.2となっています。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function\">$</span><span class=\"token punctuation\">(</span>document<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'pageinit'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'#selector'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">//ここに処理を記述</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>#selectorの部分は、**data-role=“page”**に対応するidです。適宜変更して下さい。</p>\n<p>これで行けるぜやったー！ と思っていたら、もう一つ罠が潜んでいました。 pageinitの中で、 ページが表示されるたびAjaxでリクエストを飛ばし、最新のデータを取得する という処理を書いていたのですが、<strong>２回目以降の表示でAjaxが動いていません。</strong> pageinitについて調べてみると、 pageinitは私の意図どおりの挙動をしていないことが分かりました。pageshow”></p>\n<h2 id=\"pageinitとpageshowイベントfigure\" style=\"position:relative;\"><a href=\"#pageinit%E3%81%A8pageshow%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88figure\" aria-label=\"pageinitとpageshowイベントfigure permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>pageinitとpageshowイベント<figure></h2>\n<p><q>ページ表示時に発火するpageshowイベントやページのイニシャライズで1回だけ発生するpageinitイベントなど、ページ関連のイベントをうまく使ってください。 </q> <figcaption> <cite><a href=\"http://d.hatena.ne.jp/pikotea/20120405/1333631161\" target=\"_blank\">そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか – へっぽこプログラマーの日記</a></cite> </figcaption> </figure></p>\n<p>こちらの記事にあるように、 pageinitイベントはページが最初に表示された時（＝１回目）しか発生しません。 ページが表示されるたびに実行したいスクリプトは、pageshowイベントを捕まえれば良いようです。 <strong>イベント名で気づけよ…！</strong> 集中を切らしていました。早速修正します</p>\n<h2 id=\"pageinitとpageshowを使い分ける\" style=\"position:relative;\"><a href=\"#pageinit%E3%81%A8pageshow%E3%82%92%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%82%8B\" aria-label=\"pageinitとpageshowを使い分ける permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>pageinitとpageshowを使い分ける</h2>\n<p>pageinitとpageshowを使い分けたサンプルが以下となります。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token function\">$</span><span class=\"token punctuation\">(</span>document<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'pageshow'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'#selector'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">//ページが表示されるたびに実行する</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token function\">$</span><span class=\"token punctuation\">(</span>document<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'pageinit'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'#selector'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">//ページが初めて読み込まれたとき１回だけ実行する</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>例えば、 pageinitはスライドショーなどで使うHTMLの挿入（１回だけ必要）などに使い、 pageshowはGoogleAnalyticsの読み込みや、要素の座標等の調整（表示のたびに必要）などと使い分けることができるかな、と思います。 これで、目的の動作を達成できました。 初歩的なハマり方ですみません。。。</p>","timeToRead":3,"frontmatter":{"title":"jQueryMobileでは$(function(){});ではなくpageinitとpageshowを使い分けるべき","tags":["jQuery","jQuery mobile"],"date":"January 10, 2013","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='150'%20viewBox='0%200%20400%20150'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2075v75h156a1562%201562%200%2000156-3l-1-1c0-2%201-2%204-2s3%200%202%201v4l1-1%201-2c1%200%202-4%201-6l-2-1c-2%200-2%200%200-1l3-2h-3c-3%200-2%200%201-1s3-1%202%203v4l1-4c3-4%202-5-1-6s-4-4-2-4l4-1h1l-1%201v1c2%201%205-6%2010-24%203-14%203-15%202-17-3-2-10-2-13%201-2%202-3%203-4%202h-4l2%201v4h-2c-2%200-3%200-3%204l1%204v1l-2%202%201%201%201%203-2%202-2%203c-1%204-8%204-10-1-2-3-2-4%202-11l-1-1c-2%200-2-8%200-9l-1-1c-2%201-3-1-1-3v-6c-2-1-2-2-2-4%201-2%201-2-1-1-1%202-2%202-2%201h-3c-1%201-2%202-3%201l-1%201h-3l-1%204v7l-1%204c-2%201-2%202-1%202%202%202%201%206-1%209-3%203-3%203-4%202l-3-2v-4c-2-1-2-3%200-2l1-1-1-1v-2l1-2v-2l1-7v-1l4-2v-1c-2-2-2-2%200-3%201-1%201-1-1-1l-3-1-2-2c-2-1-4%200-2%201%201%200-2%207-5%209l-5%202-6%201h-5l-1-1v1c2%202%201%203-1%203-3%201-4%203-2%203s0%204-2%206c-2%201-4%200-4-2l-3-6-3-5-2-1c-1%200-2%200-1%201l-1%201-2%202-1%205v9l-1%202-3%201-4%202c-1-1-3%200-4%201-1%202-5%203-5%201h-2l-2-1v-1l-2-1-2-1-1-1-1-1-4-6-4-4c-2%200-4-5-2-6v-2l-2%201c-1%201-2%202-3%201-3%200-6%204-5%208v2l-1-1-1%201c-2%203-1%205%202%204h5v1l1-1h1l3%201%202%201%201%201c1%200%202%201%202%203%200%205-3%208-7%208a133%20133%200%2000-32%208l-5%201h-5l1-1c2-1%202-6%201-6l-4-1-1%201c1%201%200%202-4%202h-4l2-1v-1l-5%201c-3%201-4%201-6-1l-4-2c-2%200-2-1-2-3l-1-3-1%201c0%202-2%203-3%202v-1l1-2-1-2-1%201-1%201v-7l-1-3-3-5h-1l-1%202c-1-1-2%200-3%201-1%202-1%202-2%201h-2l1%202v4l-2%204-2%201-2%203-2%202-1%202-2%202-6%204c-5%205-9%205-12%202s-2-5%202-6l4-3%203-1c2%201%204-1%205-5l1-5%203-18V78l2-3%204-3-3-3c-3-3-3-4-2-6v-2c-1%200-1-2%201-3%201-2%201-2%203-1h6l3%204%202%203h-4l2%201c2%201%202%201-1%201l-6%201c-2-1-3%200%200%202l1%201h4l3%202c1-1%204%200%204%202%200%203%201%202%203-1%202-2%202-4%201-6v-6l-2-1%202-1v-1l1-4%201-2c-1-1%200-3%202-4l2-5c0-2%200-2%202-2%201%201%202-2%200-3l-1-2v-2c-2-1%201-3%202-2l1-1%202-1%202-1c0-2%202-1%202%201l-4%203-2%202h4l1-2%202-2c0-2%201-3%204-4l4-2%207-1%208-1h2l4%202c2%201%203%201%203-1l1-1%204%202%203%203%204%203%203%202%203%204c3%203%208%2011%208%2014l4%207%201%202c0%203%202%203%203%200%200-3%203-3%204%200l2%202c2%201%202%201%202%203-1%201%200%201%201%202%201%200%202%201%201%207%200%208%201%2012%203%2013v1l-1%201h1l3%203c1%203%204%204%207%202V75l1-2%201-2c1-1%202-2%201-3s-1-1%201-1c1%201%202%201%202-1l2-1c2%201%204%207%202%208-1%201-1%201%201%202v2c-3%202-2%203%200%202%202%200%202%200%201%201-1%202-1%202%201%203l2-1%202-1v-2l1-4%202-2%203-2%202-2h1l3-1c1-3%204-2%203%201l1%202%201-3%202-2%203-1h2l3-1h3c-1%202%200%203%203%202%202%200%203%200%202%201%200%201%201%202%203%201l4%201%202%201%201-1%201-1h2v3c1%201%201%200%202-1l2-2c1%201%202%200%203-1h7c1%201%201%201%200%200%200-2%201-2%202-2l2%201v3l-1%201h3c2-1%203%200%201%202v2h1c1-1%201%200%201%202l-1%203v4l2-1c1-1%201-1%202%201%202%201%202%201%201-1l1-2%201-1%201-2h1v-1l2-2%203-4%202-1%201-1%202-1c5%201%208%200%208-1l-1-2-1-3c-1-2-1-2%202-2%204%200%205%202%203%205v3c1%202%204-1%203-3l-1-13c-1-16-4-28-10-49%200-2-9-2-163-2H0v75m141-5c0%202-3%203-3%200l-2-2v2l-1%202-1%202%204%201c3-1%203-1%203%201s-1%202-4%202h-4l2%201v1c-3%203-1%2017%201%2015l1%201c-1%201-1%201%200%200%202%200%202%200%201%201%200%202%200%202%203%202h4l-3%202c-3%202-2%204%201%202l1-2%201-1%203%201h3c2-3%202-2%202%200-1%201-1%202%201%202l1-1c-1-2%201-5%203-5%204%200%207-4%204-5-1-1-1-1%201-2%202%200%204-5%201-5l-1-3-1-3-1%203c0%203-3%203-4%200%200-2-2-3-3-1h-3l-5-2c-2%200-2%200%200-1v-5c3%200%202-2%200-2-1-1-2-2-1-3l-1-1-3%203M41%2079c0%201%203%205%205%205l2%202c0%202%200%202%201%201l6%201c4%202%206%202%207%201h2c0%202%200%202%202%200%203-2%203-3%200-2h-2c0-1%201-2%203-2l2-2c-1-1-5%201-5%202h-1l-6-1c-3%200-4-1-4-2h-1c-1%200-4-2-4-4l-2%201-2%203v-3c0-2-2-3-3%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.672,"src":"/static/166e4e8cd5e073f104a9d7f24ea7766c/4fe8c/featured-image.jpg","srcSet":"/static/166e4e8cd5e073f104a9d7f24ea7766c/466a3/featured-image.jpg 334w,\n/static/166e4e8cd5e073f104a9d7f24ea7766c/4fe8c/featured-image.jpg 600w","srcWebp":"/static/166e4e8cd5e073f104a9d7f24ea7766c/ad85c/featured-image.webp","srcSetWebp":"/static/166e4e8cd5e073f104a9d7f24ea7766c/cd98f/featured-image.webp 334w,\n/static/166e4e8cd5e073f104a9d7f24ea7766c/ad85c/featured-image.webp 600w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},"pageContext":{"slug":"/how-to-treat-ready-event-in-jq-mobile/","previous":{"fields":{"slug":"/display-error-temporary-in-php/"},"frontmatter":{"title":"PHPで一時的にエラーを表示する方法","tags":["PHP"]}},"next":{"fields":{"slug":"/omit-close-tag-in-html/"},"frontmatter":{"title":"「HTMLのタグは一部省略可能」表示速度はどちらが早いのか調べてみた","tags":["HTML"]}}}},
    "staticQueryHashes": ["2585454260","2954598359"]}