jquery mobile 的所有数据属性引用都不起作用

Question

在我的标题中我包含了

<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.css">
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>

并且每当我使用例如 data-role="page" 时，预期的效果都不会获得。

为什么会这样？

编辑:https://jsfiddle.net/f0eurafv/1/ 注意登录表单中的文本输入

Answer 1

引用您的 fiddle 链接( https://jsfiddle.net/f0eurafv/1/ ):

问题是您已将点击功能绑定(bind)到您的 <h2> -您在其中手动淡入/淡出不同页面的标签。在这种情况下，jQuery-mobile 不会为您完成工作(切换到另一个页面)，作为副作用，它不会正确呈现页面中的元素(例如输入)。

您可以尝试在点击函数中调用 jQuery-mobile 的 changePage() 函数，并找到一种方法来更改过渡效果 ( http://demos.jquerymobile.com/1.4.5/transitions/ ):

$('#loginA').click(function(){
    $.mobile.changePage('#loginform');
});

或者你输入<a> -带有 href 的标签- 应在您的链接周围打开的页面 ID 的属性:

<div id="sliderA" data-role="content"><h2 id="loginA"><a href="#loginform">Login</a></h2></div>