我正在制作一个 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
中,也不会产生错误。
有什么想法为什么不会发生这种情况吗?
谢谢。
最佳答案
您滥用了委托(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)事件有几个好处:
- 简化并分离事件代码。
- 您无需为项目添加单独的处理程序而产生开销。
关于javascript - 无法从 pageshow 函数修改innerHTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24267647/