Question

我有一个简单的索引页面。

<head>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.3.0.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('a').attr("data-role", "button"); 
        $('a').attr("data-transition", "slide");    
    })
</script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>

</head>

<body>

    <div data-role="page">
        <a href="2.php">Go to next page</a>
    </div>

</body>

..这是我的下一页

<head>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.3.0.min.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(function(){
        $('a').attr("data-role", "button");
        $('a').attr("data-transition", "slide");
    })
</script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
    <div data-role="page">
        <a href="index.php">asd</a>
    </div>
</body>

当我点击“下一页”链接时，JQM无法读取'data-role =“按钮”'。因此，链接在下一页，看起来像简单的链接。

那么，我怎样才能让它动态读取？

Answer 1

为了告诉框架按钮的样式应该应用于某个元素，你必须在任何选择器上调用按钮插件。

请注意，此代码应放在页面事件（pageshow，pagecreate，pageinit等）中。为了工作，你需要在每个div中添加一个id，其中data-role =“page”是你的页面

在你的情况下应该是

$(document).on('pagebeforeshow', '#page_id',  function(){
   $('a').button();

   //would be better to put an id in your button
   $('#button_id').button();
});

看看api文档，了解一旦调用按钮插件可以使用哪些方法。 http://api.jquerymobile.com/button/

jQuery Mobile在外部页面中动态添加数据角色

1 个答案: