2

我是 JQM 的新手，但不是没有 jquery。我正在使用在普通网页上运行良好的corner.js 插件。

所以我在html HEAD中有以下代码。

<script type="text/javascript">
    $(document).ready(function() {

        $('div.grid_inner').corner("round 8px").parent().css('padding', '4px').corner("round 14px");

    });
</script>

我有以下 DIV

<div data-role="content">
            <div class="grid_outer" id="grid_outer_profile">
                <div  class="grid_inner" id="grid_inner_profile">

                    <table>
                        <tr>
                            <td><img src="<?php echo $avatarpath; ?>" /></td>
                        </tr>
                        <tr>
                            <td><?php echo $email; ?></td>
                        </tr>
                        <tr>
                            <td><?php echo $aboutme; ?></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div><!-- /content -->

问题是没有应用 CSS 角。不在我的桌面、我的 Android 手机或 Android Tab 上。

只有在我刷新它们之后才会应用它们。我试图找出是否需要强制刷新组件，但如果是这样，我不知道如何为命名的 DIV 执行此操作。或者，也许我从根本上做错了什么？

谢谢你的帮助！

4

2 回答 2

1

jQuery Mobile 是面向页面的，并实现了自己的文档加载策略。您必须绑定到pageinit事件而不是ready:

$(document).on("pageinit", function(e) {
    $("div.grid_inner", e.target)
        .corner("round 8px")
        .parent().css("padding", "4px").corner("round 14px");
});
于 2013-03-04T16:05:09.420 回答
1

工作示例：http: //jsfiddle.net/Gajotres/8pG6c/

准备好文件是你的问题。通常不应该使用它，jQuery Mobile因为它可以（并且通常确实）在jQuery Mobile页面准备好之前触发。

可以使用正确的jQuery Mobile页面事件来修复它，在您的情况下使用：

$(document).on('pagebeforeshow', '#page-id', function(){  
    $('div.grid_inner').corner("round 8px").parent().css('padding', '4px').corner("round 14px");
});

page-id是显示网格的页面的 id，在我的示例中是#index.

通常的方法是使用pageinit事件，但在您的情况下，更好的解决方案是pagebeforeshow. pageinit每个加载的页面仅触发一次事件（除非手动刷新页面）。

如果您想了解有关此主题的更多信息，请查看我的其他文章，更透明的是我的个人博客。或者在这里找到它。

于 2013-03-04T16:05:09.590 回答