使用jQuery Mobile时，内容无法动态加载到DIV中。

Question

这个示例并没有完全展示问题，只是为了给大家一个概念。比如说，当我点击第二页时，内容不会在DIV中加载，我必须刷新页面才能看到第二页的内容。

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 
});

- Mils

---

你的意思是像这样吗？http://jsfiddle.net/gCsDz/6/ - Morpheus

哦，抱歉，当我更新JSFIDDLE时，出现了这个错误。 - Mils

Answer 1

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

你不应该使用document ready与jQM，而是jQM提供页面事件。你的问题是document ready在页面加载到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://dev59.com/dGYq5IYBdhLWcg3wcwWE#14469041

- Gajotres