爲什麼添加jQuery Mobile會導致HTML消失？

我有一個簡單的從這個SO question修改下拉選擇集。如果我在jQuery（無JQM）中運行它，它的功能正常，當我添加jQuery Mobile時，HTML只在頁面上閃爍，然後它變成空白，我找不到原因。如果我讓jQuery Mobile的並註釋掉JS的最後一行：爲什麼添加jQuery Mobile會導致HTML消失？

showTab(select.val());

它會顯示所有可用的選擇，而不是隻是一個單一的選擇所期望的結果。在下面的小提琴中，選擇jQuery Mobile並運行它，HTML在閃爍一秒後消失。

下面的工作小提琴顯示它處於工作狀態，我希望選擇後只顯示下拉列表中選擇的選項。但我希望jQuery Mobile也能工作。忽略提交按鈕，它還沒有連接到任何東西。

Working Fiddle

的HTML：

<form> 
    <p> 
     <h2>Select option to create PCBID:</h2> 

     <select id="dropdown" name="dropdown"> 
      <option value="pcbids" selected="selected">PCBID Single</option> 
      <option value="pcbidr">PCBID Range</option> 
      <option value="pcbidq">PCBID Quantity</option> 
      <option value="pcbidl">PCBID List</option> 
     </select> 
    </p> 
</form> 
<body> 
    <div id="pcbids"> 
     <label>PCBID Single:</label> 
     <input type="number" placeholder="12345" title="Just enter a single PCBID number" /> 
    </div> 
    <div id="pcbidl"> 
     <label>PCBID List:</label> 
     <input type="textarea" placeholder="12345,70237,8901" title="Enter a comma separated list of PCBID numbers you're like to create" /> 
    </div> 
    <div id="pcbidr"> 
     <label>PCBID Range:</label> 
     <input type="text" placeholder="12345-12400" title="Enter a range separated by a dash (-) and no spaces" /> 
    </div> 
    <div id="pcbidq"> 
     <label>PCBID Quantity:</label> 
     <input type="text" placeholder="12345:100" title="Enter a starting PCBID number followed by a colon (:), followed by the sequential number you want to create" /> 
    </div> 
    <label for="submit"></label> 
    <input type="button" id="create_button" value="Submit" />

的JS：

var select = $('#dropdown'); 
function showTab(name) { 
name = '#' + name; 
$('div').not(name).hide(); 
$(name).show(); 
} 

select.change(function() { 
showTab($(this).val()); 
}); 
//comment out this last line after selecting jQuery Mobile 1.3.1 under Frameworks & Extensions above 
showTab(select.val());

我試圖加載在$(document.ready(function(){...}); construct代碼，以及$(window).load(function() {...});與第二個我可以獲取整個選擇列表，並在JQM加載時顯示出來，但只要我選擇一個，整個頁面就會再次消失。

我錯過了什麼？如果它有什麼不同，這一切都在Chrome中。作爲參考，這裏是the original fiddle I modified。

來源

2014-01-27 delliottg

jQuery Mobile將每個input和button包裝在一個包含所有樣式的div中。

當您使用$('div').not(name).hide();時，會隱藏頁面中的每個div，包括input包裝。但是，使用.show()時，顯示父div，但所有元素仍然隱藏。相反，請隱藏以pcbid開頭的div而不是div。

$('[id^=pcbid]').not(name).hide(); 
$(name).show();

Demo

來源

2014-01-28 00:11:28 Omar

好極了！感謝您的快速回答和教育。我沒有意識到JQM在div中包裝輸入和按鈕。感謝這個例子。 – delliottg

@delliottg歡迎您:) – Omar

爲什麼添加jQuery Mobile會導致HTML消失？

回答

相關問題