歡迎轉載(註明出處)或直接轉貼網址也ok,但是請不要直接把內容摳走貼在別的地方~

其實這個popup 失效的問題跟popup 本身一點關係都沒有

抱歉第一行就讓大家看到廢文

這個問題是這樣的

我有 page1.html、page2.html 兩個頁面

兩個頁面裡面都是single page 的template

然後兩個 page 的header 跟footer 都一樣

意思就是兩個頁面的 header、footer 的html 都一模模一樣樣,包含裡面的 id

都是這樣

 

如下圖是 page1.html

上面的 header 右方有個 grid icon,點下去會popup 出選單

Clipboard02

 

如下圖 : 

然後點popup出來的選單ex: 流行新聞,就會跳到 page2.html

 Clipboard03

 

但問題是跳到 page2.html 之後再點那個 grid icon 就沒作用了,選單跳不出來

這個問題大概困了我整整一天吧

 

因為我對 JQM 導頁的動作原理認知是這樣的.....

===========================================

如果你的超連結不是設定 rel="external" 或者是 target="_blank"

ex : <a href="page2.html" rel="external">page2</a>

那預設都會是 ajax 去抓取 page2.html 網址<body> 內的內容

然後把內容塞到原本 page1.html 的DOM 之中

 

然後我補腦成

ajax 抓到的 page2.html 的內容是第一個 date-role="page"裡面的 DOM

然後會把內容塞到 page1.html 原本的 <div date-role="page"> 裡面 (錯很慘)

意思就是不用管原來 page1.html 裡面原本的內容,反正會被 page2.html 的內容取代掉

所以就算 page2.html 裡面有元素的 ID 與 page1.html 一樣也無所謂

 

但後來測了很多遍 + 找了一下資料發現其實應該是這樣的

==========================================

點下 <a href="page2.html" rel="external">page2</a>

page1.html 連結到 page2.html 後

jQuery Mobile 預設會透過 AJAX去抓取page2.html <body> 內的內容 

將它附加在 page1.html 原來的 <div date-role="page"> 之後

不是之中.........

用jQuery 來表達就是........

$("#page1_homepage").after(page2); // o

不是完全取代

$("#page1_homepage").html(page2); // x

也不是附加在裡面

$("#page1_homepage").append(page2); // x

 

如果是 .after 那從 page2.html 抓回來的控制項 ID 就跟 page1.html 重覆了

死掉是很正常的事情

 

因為書上寫的都很模糊,只說會透過 AJAX 把內容抓回來沒說放在哪

然後只有叮嚀<head></head> 裡面引用的 js、css 會被忽略要小心

但沒有提到兩個頁面的 ID 不能一樣......... = =

 

當然我也測了一下,這個結果可以很明顯的在firefox 上實驗出來

做了兩個測試頁面,page1跟page2的 html 完全一樣,只有連結位置不一樣

page1.html

page2.html 透過generated後的html source

今天知道這個問題,讓我覺得也很麻煩........

因為這就說明了如果以後要用預設的連結方式的話

來源頁跟目的頁(可能是多個目的頁面)的 ID 不能重覆...... = ="

以後selector 盡量用 class 去抓吧!

 

ps : 也可以用 data-id 屬性,然後 selector 用 :jqmDdata(id='') 去抓

 

 

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(6) 人氣()


留言列表 (6)

發表留言
  • andy19890411
  • 您好,不知道您還有沒有繼續在維護此Blog~
    我必須要說,你這個解法替我停止了Google超過一天半的無限迴圈狀態!!!
    Anyways thanks a lot !!
  • 部落格俺是偶爾會上來看一下啦 XD
    很高興能幫到你喔!

    小雕 於 2015/08/03 12:01 回覆

  • 訪客
  • 大大您好,我也遇到了相同的問題,也是困擾了我好久~
    但小弟還是新手,不太明白您底部的解決方案要如何寫哩
    1.以後selector 盡量用 class 去抓吧!
    2.ps : 也可以用 data-id 屬性,然後 selector 用 :jqmDdata(id='') 去抓

    小弟只知道把id名稱改掉,但是如果多個頁面怕會瘋掉XD
    想請教大大要如何寫呢?或是哪裡有相關文章可以看
    小弟我都Google不到,感激不䀆!!
  • 發現這個編輯器不能貼 html = ="

    hi 頁面上dom的id是不能重複的,所以當你頁面上出現同樣id的element再用jquery去抓id時就會出現一些問題

    例如下面這樣綁 id
    <input type="button" value="1" id="aa" />
    <input type="button" value="2" id="aa" />

    <script>
    $("#aa").click(function () {
    alert("");
    });
    </script>

    可以發現點第二個按鈕永遠沒作用

    所以可以改成綁 class name

    <input type="button" value="1" class="aa" />
    <input type="button" value="2" class="aa" />

    <script>
    $(".aa").click(function () {
    alert("");
    });
    </script>

    或是用第二點說的html5 data-* 屬性

    <input type="button" value="1" data-role="aa" />
    <input type="button" value="2" data-role="aa" />

    <script>
    $(':jqmData(role=aa)').click(function () {
    alert("");
    });
    </script>

    小雕 於 2015/12/22 15:21 回覆

  • 訪客
  • 大大您好~
    小弟加上了
    $(':jqmData(role=test)').click(function () {
    $(':jqmData(role=popup)').show();
    });
    $(".try1").click(function () {
    $('.try2').show();
    });
    並把id刪除,但不管是選擇器或data-方法,變成連一次都沒有跳出
    不知哪裡有問題~能請大大有空把小弟看一下嗎?感謝><"
    http://www.mediafire.com/download/2fzkijkn1g1tzji/JQuery_Mobile2.zip
  • hello 你的code其實不需要寫 js
    popup 是jqm 本來就內建的,沒跳出來是因為沒有給 id 的關係
    改成下面這樣就可以了

    line 30:
    <a href="#popupBasic" data-rel="popup" data-position-to="window" data-transition="pop" data-icon="gear">關於我們</a>

    line 34:
    <div data-role="popup" id="popupBasic" data-overlay-theme="b" data-theme="b" style="max-width:400px;">

    小雕 於 2015/12/23 22:13 回覆

  • 訪客
  • 啊~大大不好意思,我沒有說清楚~
    先讓你看一下我原本有問題的檔案~
    http://www.mediafire.com/download/87gixdy21yl93kz/JQuery_Mobile.zip

    index.html和mcart.html的『關於我們』都是相同id
    先點擊底部中間的『檢視購物車』後再點擊『逛逛商店』後再點擊『關於我們』就無法正常跳出,用Google開發工具看發現和大大版上的問題相似,會出現二組相同id

    目前照大大說的將id設不同即可執行,但如果在多頁怕會瘋掉
    所以想try看看版大的方式XD
  • 我有做出一個蠢方法,但是應該可以解決你的問題 XD
    剛在chrome上測試還蠻正常的~

    https://www.dropbox.com/s/opbkwzarqv9a13h/JQuery%20Mobile.zip?dl=0

    主要是js 改成這樣

    $(document).on("pagecreate", function (event) {
    $(".aboutme").click(function () {
    $(':jqmData(role=popup):eq(' + ($('.popupDialog').size() - 1) + ')').popup("open", { "positionTo": "window" });
    });
    });

    因為 role=popup 最多重複一次,所以永遠popup最後一個就可以了
    以後也不需要綁 id 或 class name了

    小雕 於 2015/12/24 10:18 回覆

  • 訪客
  • 大大再請教一下~
    :eq(' + ($('.popupDialog').size() - 1) + ')')
    1.請問這行是不是一直選擇最後一個來做popup的cdoe?
    2.但小弟不明白那二個『+』的意思哩
    3.二個html檔裡都沒有popupDialog這個class哩,請問這code是如何抓到這個class呢?
  • 啊 抱歉

    給的code好像少了 class,正確應該是這樣

    <div data-role="popup" class="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">

    不過我剛試了一下,直接給 -1 也可以正常運作
    $(':jqmData(role=popup):eq(-1) + ')').popup("open", { "positionTo": "window" });

    原理就是上面所說的,永遠抓最後一個就可以了
    那個 + 符號只是用來字串相加用的

    小雕 於 2015/12/28 11:05 回覆

  • 訪客
  • ohoh 感恩~~