不能从pageshow函数修改innerHTML

Can't Modify innerHTML from pageshow function

本文关键字：修改 innerHTML 函数 pageshow 不能      更新时间：2023-09-26

我正在制作一个JQuery移动web应用程序，并且我遇到了一个有趣的问题。我试图从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，也不产生错误。

知道为什么没有发生吗?

谢谢。

您误用了委托的事件处理程序(它不是为每个元素设计的)。如果可以从页面中提取页面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对委托事件有一些奇怪的副作用。

委托事件有以下几个好处:

  • 简化和分离事件代码。
  • 您不需要为项目添加单独的处理程序。
相关文章：