php - 将动态检索的内容添加到 jQuery Mobile PHP MVC 的 jQuery 对象

Question

我有一个 MVC Web 应用程序，它使用 PHP 检查查询字符串中的内容，并通过呈现页眉、内容和页脚来加载适当的页面(例如？category=1 加载呈现类别 View 的 CategoryController) .

我还有一个 custom.js，它将 jQuery 功能添加到 DOM 中的元素。由于动态内容由 PHP 控制，因此 jQuery 功能仅在页面首次加载时才起作用。遍历应用程序不会刷新页面，因此新包含的元素不会添加到 jQuery 对象中。

关于如何解决这个问题有什么想法吗？

Answer 1

首先不要将 $(function() 或 $(document).ready() 与 jQuery Mobile 一起使用，因为 jQM 不是为了那样工作而构建的。相反，您应该使用此处提到的页面事件:https://stackoverflow.com/a/14010308/1848600 或这样的 mobileinit 事件:

$(document).on("pageinit", function () {

});

或者 mobileinit 如果您希望它在应用程序执行时只执行一次:

$(document).on("mobileinit", function () {

});

原因在顶部链接中描述。您还可以在 jQM 官方文档中找到更多相关信息:http://jquerymobile.com/test/docs/api/events.html

现在，如果您希望 jQM 重新设计页面样式，您应该使用 .trigger('pagecreate') 函数。

假设您有一个 ID 为 index 的 jQM 页面，这是您生成的布局。

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" id="test-button">Test button</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>  

要强制 jQM 设置样式，您应该使用如下内容:

$('#index').live('pagebeforeshow',function(e,data){    
    $('#index').trigger('pagecreate');
});

或者如果您想将其应用到每个 jQM 页面，请像这样使用它:

$('[data-role="page"]').live('pagebeforeshow',function(e,data){    
    $(this).trigger('pagecreate');
});