0

简而言之..

每次我在我的 jquery 移动项目的页面上打开一个弹出窗口时，popupbeforeposition 事件都会触发直到我使用

$.mobile.changePage(urlObj.hrefNoSearch, {data: postData, type: 'post', reloadPage: forceReload});

强制刷新当前页面，之后不会触发“popupbeforeposition”事件。

详细说明并显示我的代码..

我的 jquery 移动项目中有一个页面 ( id="page_manage-buildings")。

此页面包含一个打开弹出窗口的链接：

<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”事件触发了两次。我可以处理，但想知道它是否是由明显的事情引起的？

        $(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 取消绑定事件，以确保只有一个事件触发。

            $(document).off("popupbeforeposition", "#manage_buildings_image_picker").on("popupbeforeposition", "#manage_buildings_image_picker", function(event, ui) {
                console.log('*** popupbeforeposition event ***');                    
            });

仅在文档级别的特定页面上使用的绑定事件似乎很混乱，我仍然想知道为什么将它绑定到该页面中存在的元素时它不起作用？

4

0 回答 0