javascript - 无法从 pageshow 函数修改innerHTML

Question

我正在制作一个 JQuery Mobile Web 应用程序，并且遇到了一个有趣的问题。我正在尝试从 pageshow 函数中动态注入(inject)页面的内容。我知道正在调用 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

您滥用了委托(delegate)事件处理程序(它不是为每个元素设计一个事件处理程序)。如果您可以从页面中提取页面 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');
 });

您的 map 和页面之间很可能存在某种关系，但如果没有 HTML，就很难提供更好的选择器。

更新:

查看实际页面 HTML，每个“页面”都有一个 data-role="page" 属性。这应该是委托(delegate)事件选择器的目标。然后，您可以从该页面获取 ID，在其前面加上“map_”前缀，然后直接找到匹配的 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');
});

委托(delegate)事件处理程序:

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

如果您没有方便的、不变的祖先，请使用 $(document).on，但切勿使用 $('body').on 作为 body 对委托(delegate)事件有一些奇怪的副作用。

委托(delegate)事件有几个好处:

• 简化并分离事件代码。
• 您无需为项目添加单独的处理程序而产生开销。