手短に..
jqueryモバイルプロジェクトのページでポップアップを開くたびにpopupbeforepositionイベントが発生します
$.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post', reloadPage: forceReload});
現在のページを強制的に更新します。その後、「popupbeforeposition」イベントは発生しません。
私のコードを詳しく説明して表示するには..
id="page_manage-buildings"jquery モバイル プロジェクトにページ ( ) があります。
このページには、ポップアップを開くリンクが含まれています。
<a href="#manage_buildings_image_picker" data-rel="popup" data-role="none" data-inline="true" data-transition="pop">open popup</a>
「manage_buildings_image_picker」ポップアップ コンテンツの html は非常に単純です。
<div data-role="popup" id="manage_buildings_image_picker" data-transition="pop" class="ui-content" data-history="false" data-corners="false" data-theme="d" data-overlay-theme="a" style="width:300px; height:150px;">
... popup contents here ...
</div>
「pageinit」イベントを「#page_manage-buildings」ページにバインドし、その中で「popupbeforeposition」イベントを「manage_buildings_image_picker」ポップアップにバインドしています。
$(document).on("pageinit", "#page_manage-buildings", function() {
console.log('#page_manage-buildings page - pageinit event -- (only once for THIS page)');
$( "#manage_buildings_image_picker" ).on({
popupbeforeposition: function(event, ui) {
console.log('popupbeforeposition event');
}
});
});
$.mobile.changePage を使用して現在のページをリロードするカスタム コードを実際に実行する「更新」というラベルの付いたボタンをクリックして、現在のページを強制的にリロードするまで、すべて正常に動作します。(ページからページに渡されるセッション変数を保持する必要があります)。とにかく、更新ボタンをクリックした後、「manage_buildings_image_picker」ポップアップを開いたときに「popupbeforeposition」イベントが発生しなくなりました。
これは、「更新」ボタンがクリックされたときに実行されるコードです。
convert_get_to_post($(location).attr('href'), true);
function convert_get_to_post(urlStr, forceReload){
postData = new Object;
var urlObj = $.mobile.path.parseUrl(urlStr);
if(urlObj.search){
// -- ensure any query string parameters are sent as post data
var dataStr = urlObj.search.toString();
dataStr = dataStr.replace(/^\?/,'');
dataPairs = dataStr.split('&');
//console.log('here is the dataPairs');
//console.log(dataPairs);
var avsessionFound=0;
for (x in dataPairs) {
dataPair = dataPairs[x];
//console.log(dataPair);
var dataSet = dataPair.split('=');
//console.log('here is the dataSet');
//console.log(dataSet);
postData[dataSet[0]]=dataSet[1];
if(dataSet[0]=='avsession'){
avsessionFound=1;
console.log('avsession found: '+dataSet[1]);
}
}
if(avsessionFound==0){
// inject the avsession value into the post data
postData['avsession'] = $.jStorage.get('avsession', '');
}
//console.log('here is the postData');
//console.log(postData);
// send this request as a post
$.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post', reloadPage: forceReload});
}else{
// no query string to worry about jsut send this as a post with the avsession value injected
postData['avsession'] = $.jStorage.get('avsession', '');
$.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post', reloadPage: forceReload});
}
}
更新 #1
ON バインディングの構文を変更し、'popupbeforeposition' イベントの問題を修正しましたが、ポップアップを閉じると 'popupafterclose' イベントが 2 回発生します。私はそれを処理できますが、それが明らかな何かから引き起こされたのだろうかと思っていましたか?
$(document).on("pageinit", "#page_manage-buildings", function() {
console.log('#page_manage-buildings page - pageinit event -- (only once for THIS page)');
$(document).on("popupbeforeposition", "#manage_buildings_image_picker", function(event, ui) {
console.log('*** popupbeforeposition event ***');
});
$(document).on("popupafterclose", "#manage_buildings_image_picker", function(event, ui) {
console.log('*** popupafterclose event ***');
});
});
アップデート #2
実際には、更新 #1 のコードにより、バインド イベントがバインドされた pageview+(n-1) 回 (n はそのページが表示された回数に等しい) を取得しました。これは、イベントがドキュメント レベルでバインドされ (JQM では同じまま)、ページがロード/アンロードされるときにのみ更新されるためです。私はOmarの提案を使用し、イベントをバインドする前にOFFでイベントのバインドを解除しました。これにより、イベントが1つだけ発生することが保証されます。
$(document).off("popupbeforeposition", "#manage_buildings_image_picker").on("popupbeforeposition", "#manage_buildings_image_picker", function(event, ui) {
console.log('*** popupbeforeposition event ***');
});
ドキュメント レベルで特定のページでのみ使用されるバインド イベントは面倒に思えますが、そのページ内に存在する要素にバインドするときに、なぜ機能しないのか知りたいですか??