Question

简而言之......

每次我在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 ***');                    
            });

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

popupbeforeposition事件在页面刷新后未触发

0 个答案: