Question

我正在制作一个JQuery Mobile网络应用程序，并且遇到了一个有趣的问题。我试图从pageshow函数中动态注入页面的内容。我知道正在调用pageshow函数，因为console.log打印正确，但是测试HTML没有出现在页面中。

pageShow功能代码：

for(var i = 0; i < landmarkList.length; i++)
{
    var pageId = landmarkList[i].landmarkLink.substring(1, landmarkList[i].landmarkLink.length);
    $(document).on('pageshow','#' + pageId,function(){
        console.log("Init Map for page: " + pageId);
        document.getElementById("map_" + pageId).innerHTML = 'TEST';
    });
}

这是一个例子： http://jakeserver.com/Apps/BostonLandmarks/B9/index.html。单击一行时，pageShow函数会加载，但innerHTML不会添加到div，也不会产生错误。

为什么没有发生这种想法？

感谢。

Answer 1

您滥用委托事件处理程序（它不是针对每个元素设计的）。如果您可以从页面中提取页面ID，则根本不需要循环。

基本上你的循环中的pageId值在它到达这一行时不再有效（因为它稍后被调用回来，很久之后循环修改了这个值）：

document.getElementById("map_" + pageId).innerHTML = 'TEST';

如果您可以提供HTML的示例，我会将其设为准确，但类似于：

// e.g. Match pageShow events from any pages with data-role=
$(document).on('pageshow','[data-role=page]', function(){
    var $page = $(this);
    // Extract the page id from the page element (pageId is locally scoped to this callback)
    var pageId = $page.attr('id');
    console.log("Init Map for page: " + pageId);
    $("#map_" + pageId).html('TEST');
 });

您的地图和网页之间很可能存在关联，但如果没有HTML则很难提供更好的选择器。

更新

查看实际页面HTML，每个“页面”都有data-role="page"属性。这应该是委派事件选择器的目标。然后，您可以从该页面获取id，在其前面加上“map_”并直接找到匹配的地图。

可缩短为：

// e.g. Match pageShow events from any pages with data-role=
$(document).on('pageshow','[data-role=page]', function(){
    console.log("Init Map for page: " + this.id);
    $("#map_" + this.id).html('TEST');
});

委托事件处理程序：

通过侦听所需元素的祖先来委派事件处理程序，然后当所选事件冒泡到该元素时，然后它应用jQuery选择器来查找所需的元素，然后它将函数应用于导致事件的任何匹配元素。

如果您没有方便，不变的祖先，请使用$(document).on，但$('body').on永远不会body与委派事件有一些奇怪的副作用。

委托活动有几个好处：

简化并分离事件代码。

您没有为项目添加个别处理程序的开销。

无法从pageshow函数修改innerHTML

1 个答案:

更新

委托事件处理程序：