jQuery Mobile を使用してプロジェクトを作成していますが、個別の HTML ページをリンクしようとして問題が発生しています。現在のところ、pageInitEvent.htm と pageInitEvent2.htm という 2 つの別個の HTML ファイルがあります。両方のページにボタンがあり、クリックしたときに相互にリンクしたいのですが、最初のページ (pageInitEvent.htm) のボタンがクリックされたときにトリガーされる (またはトリガーされるようにしたい) イベントもあります。$(document).on("pageinit", ".pageinit2", function(){ (pageInitEvent.htm ファイルのセクション) を使用して、このイベントを pageInitEvent2.htm にバインドしました。
私の問題は、両方のボタンに rel="external" を含めないと機能せず、エラーが発生するだけです。両方に rel="external" を追加すると、リンクは正常に機能しますが、イベントまだトリガーされず、ページ遷移が機能しない場合。ページ遷移を損なうことなくイベントを機能させることなく、2 つの個別の html ファイルをリンクする方法はありますか? 複数ページのHTMLファイルを使用してこれを試してみましたが、すべて完全に機能します。それらを別のHTMLファイルに分離すると、すべてが台無しになります
pageInitEvent.htm のコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>Listing 4.1</title>
<!-- name attribute tells the browser the meta tag contains information about the viewport or the display size of the page -->
<!-- content attribute tells browser to display the page with the same dimensions as the device it is beign viewed on -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The jQuery Mobile CSS style sheet -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- The standard jQuery library -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function(){
//$.extend allows to merge two objects together
//$.mobile is the target object to add or merge to
//The second argument to this function is the settings we want to change or merge to the $.mobile object
$.extend($.mobile, {
//change the message that appears when a pageLoadError happens
pageLoadErrorMessage: 'Either the page cannot be found or it cannot be loaded.'
});
});
//binds the pageinitevent with the page pageInit2
//third argument is an anonymous inner functi
$(document).on("pageinit", ".pageinit2", function(){
alert("pageinit is bound!");
});
</script>
<!-- The jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>pageInit event example</h1></div>
<div data-role="content">
<p>The button below will use AJAX to load another page and trigger a bound event</p>
<a href="pageInitEvent2.htm" data-role="button" >Click to open a new page</a>
</div>
</div>
</body>
</html>
pageInitEvent2.htm のコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>pageInitEvent2</title>
<!-- name attribute tells the browser the meta tag contains information about the viewport or the display size of the page -->
<!-- content attribute tells browser to display the page with the same dimensions as the device it is beign viewed on -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The JQuery Mobile CSS style sheet -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- The standard JQuery library -->
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<!-- The jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" data-url="pageInitEvent2.htm" class="pageinit2">
<div data-role="header"><h1>pageinit example</h1></div>
<div data-role="content">
<p>fantastic!</p>
<a href="pageInitEvent.htm" data-role="button" rel="external" >Amazing, now take me back</a>
</div>
</div>
</body>
</html>