为什么添加jQuery Mobile导致HTML消失?

时间:2014-01-27 23:15:29

标签: jquery html jquery-mobile

我从这个SO question修改了一组简单的下拉选项。如果我在jQuery(没有JQM)中运行它,它正常运行,当我添加jQuery Mobile时,HTML只在页面上闪烁,然后它变成空白,我无法弄清楚原因。如果我启用jQuery Mobile并注释掉JS的最后一行:

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

1 个答案:

答案 0 :(得分:1)

jQuery Mobile将每个inputbutton包装在一个包含所有样式的div中。

使用$('div').not(name).hide();时,隐藏页面中的每个div,包括input包装器。但是,使用.show()时,会显示父div,但所有元素仍然隐藏。相反,请隐藏以pcbid而不是div开头的div。

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

<强> Demo