我想在我的移动应用中使用jquery mobile swipe， 我使用以下代码：
$(document).on('pageinit', function () {
$('img').on('dragstart', function (event) { event.preventDefault(); });
function navnext(next) {
//$(":mobile-pagecontainer").pagecontainer("change", next + ".html", {
// transition: "slide"
//});
$.mobile.changePage(next + ".html", { transition: "slide" });
}
// Handler for navigating to the previous page
function navprev(prev) {
//$(":mobile-pagecontainer").pagecontainer("change", prev + ".html", {
// transition: "slide"
//});
$.mobile.changePage(prev + ".html", { transition: "slide" });
}
// Navigate to the next page on swipeleft
$(document).on("swipeleft", ".ui-page *", function (event) {
// Get the filename of the next page. We stored that in the data-next
// attribute in the original markup.
var next = $(this).jqmData("next");
// Check if there is a next page and
// swipes may also happen when the user highlights text, so ignore those.
// We're only interested in swipes on the page.
if (next) {
navnext(next);
}
});
$(document).on("swiperight", ".ui-page *", function (event) {
var prev = $(this).jqmData("prev");
if (prev) {
navprev(prev);
}
});
});
当页面为空且没有孩子时，我的代码工作正常。但是当我添加一些内容和图像时，我的页面也无法正常工作。为什么？以及如何修复此错误？
这是我的HTML代码：
<div data-role="page" id="home" class="demo-page" data-title="New York" data-dom-cache="true" data-next="relay" data-prev="relay">
<div id="mainContent" role="main" class="ui-content">
<link href="css/smarthome.css" rel="stylesheet" />
<link href="css/jquery.mobile.icons.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<script src="js/swipe.js"></script>
<!--<script src="js/swipe-page.js"></script>-->
<div id="header" data-role="header" data-form="" data-id="header" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-left">home</a></li>
<li><a href="relay.html" data-transition="slide">Relay</a></li>
</ul>
</div>
</div><!-- /header -->
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-3 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">
<div class="">
<a href="#" class="ui-btn ui-btn-b ConnectionState">Connected</a>
<!--<a href="#" class="ui-btn ui-btn-c">Disconnected</a>-->
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">
<div class="">
<div class="ui-btn btnVoltage Valid">221 V</div>
</div>
</div>
</div>
<div class="col-lg-10 col-md-9 col-sm-9 col-xs-12">
<div id="container"></div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay active on">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<div class="name">رله شماره 1 - آشپزخانه</div>
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R1 </div><div class="name">آشپزخانه</div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay active on">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<div class="name">رله شماره 1 - آشپزخانه</div>
<!--<div class="relayState relayon">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R2 </div><div class="name">سالن پذیرایی</div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay active off">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<div class="name">رله شماره 1 - آشپزخانه</div>
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R3 </div><div class="name">اتاق خواب</div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay active on">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<div class="name">رله شماره 1 - آشپزخانه</div>
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R4 </div><div class="name">پارکینگ</div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay active on">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<div class="name">رله شماره 1 - آشپزخانه</div>
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R5 </div><div class="name"></div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay active on">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R6 </div><div class="name"></div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay deactive">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R7 </div><div class="name"></div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay deactive">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R8 </div><div class="name"></div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay deactive">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R9 </div><div class="name"></div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay deactive">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R10 </div><div class="name"></div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay deactive">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R11 </div><div class="name"></div></div>-->
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
<div class="btnRelay deactive">
<img class="btnOn" src="images/RelayOn.png" />
<img class="btnOff" src="images/RelayOff.png" />
<img class="btnDeactivate" src="images/RelayDiactive.png" />
<!--<div class="relayState relayoff">
<div class="on">
ON
</div>
<div class="off">
OFF
</div>
</div>
<div class="relayname"><div class="number">R12 </div><div class="name"></div></div>-->
</div>
</div>
</div>
</div><!-- /content -->
</div>
答案 0 :(得分：1)
将".ui-page *"更改为".ui-page"。
包含*表示$(this)是子元素，因此没有data-next / data-prev。
或者将处理程序中的代码更改为
$(this).closest('.ui-page').jqmData("next");