javascript - 内容未使用 jQuery Mobile 动态加载到 DIV 中

Question

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

Answer 1

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

您不应该将 document ready 与 jQM 一起使用，而是 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