内容未使用 jQuery mobile 动态加载到 DIV答案

【问题标题】：Content not loading dynamically into DIV using jQuery mobile内容未使用 jQuery mobile 动态加载到 DIV
【发布时间】：2013-04-17 04:27:10
【问题描述】：

这个example 并没有确切地显示问题，只是为了有个想法。比如我点击第2页时，div中没有加载内容，我必须刷新页面才能看到第2页的内容。

P.S : 相同的代码在其他页面中重复。

代码：

$(document).ready(function() {
    $('.content-primary').html("Content of page 1"); // This line just in this example
    //$(".content-primary").load("content-of-page.php"); // but I used this code on all my pages 
});

【问题讨论】：

你的意思是这样jsfiddle.net/gCsDz/6
哦抱歉，当我更新 JSFIDDLE 时，出现此错误。

标签： javascript css jquery-mobile jquery

【解决方案1】：

这是一个常见的 jQuery Mobile 问题。

您不应该在 jQM 中使用 document ready，而是 jQM 提供页面事件。您的问题是文档准备好谁可以，并且通常在页面加载到 DOM 之前触发。这就是为什么刷新会有所帮助，此时页面已经加载。

我给你做了一个有效的例子：http://jsfiddle.net/Gajotres/8hKe2/

$(document).on('pagebeforeshow', '#foo', function(){       
    alert('This is foo');
});

$(document).on('pagebeforeshow', '#bar', function(){       
    alert('This is bar');
});

基本上每个页面事件都会触发仅适用于该页面的 javascript 代码。如果您希望您的代码只执行一次，则应使用 pageinit 事件而不是 pagebeforeshow，如下所示：

$(document).on('pageinit', '#foo', function(){       
    alert('This is foo');
});

$(document).on('pageinit', '#bar', function(){       
    alert('This is bar');
});

如果您想了解更多信息，请查看我的其他文章/答案：https://stackoverflow.com/a/14469041/1848600

【讨论】：