Question

我是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标签上。

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

感谢您的帮助！

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

Answer 2

工作示例：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 事件（除非手动刷新页面）。

如果您想了解有关此主题的更多信息，请查看我的其他 ARTICLE ，以便更加透明，这是我的个人博客。或者找到 HERE 。

Jquery移动，需要刷新页面才能看到CSS的变化

2 个答案: