Question

我读了很多关于如何在jquery mobile中动态添加内容的内容，但我无法弄清楚如何添加链接。

目前我的解决方案如下：

添加新页面 - ID（id =“list-1”）
为其创建链接（href =“＃list-1”）

此解决方案在静态页面中运行良好，但我想动态地执行此操作。我已经尝试了很多page()和类似的东西，但没有任何帮助我。

我的问题是：

如何添加动态链接＆amp;网页？
我选择了正确使用ID＆amp; amp;的方法吗？锚点（＃list-1）作为链接还是jquery mobile的另一种解决方案？

如果您需要更多信息，请告诉我

Answer 1

要添加动态链接，我发现最简单的方法就是让事件监听器等待点击这些链接。然后，此事件侦听器会将您要传递的任何参数保存到您正在访问的下一页中。只需在每个“li”元素中指定参数，即可将参数从list元素传递给事件侦听器。

(create the HTML for a list dynamically & store it into list-1-html)
$("div#my-page div[data-role=content]").html(list-1-html);
$("div.list-1 ul").listview();
$("div.list-1 ul").listview('refresh');

然后你的事件监听器看起来像：

$('#my-page').delegate('li', 'click', function() {
    passedParameter = $(this).get(0).getAttribute('passed-parameter');
});

当jQuery Mobile加载你的下一页时，你可能想要动态加载这个页面，你可以使用这个passParameter变量。要动态加载页面，只需添加一个等待JQM尝试加载页面的侦听器：

$('[data-role=page]').live('pageshow',function(e, ui){ 
    page_name = e.target.id;
    if (page_name == 'my-page-2'){
        (do something with passedParameter)
    }
});

这是我与jQuery Mobile一起使用的工作流程，它一直运行得很好。不过，我猜测在将来的版本中，他们会建立某种支持，将动态参数传递给页面。

Answer 2

应该在页面初始化之前完成对DOM的任何新增强。但默认情况下，一旦页面在浏览器中加载，JQM就会自动初始化页面。

因此，首先需要将autoInitializePage属性设置为false，然后在将新页面和链接添加到文档后调用initializePage（）方法。希望这会有所帮助。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
    $(document).bind("mobileinit", function(){
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
    $(document).ready(function() {

        //add a link.
        $("#page1 div[data-role='content']").append('<a href="#page2">Next Page</a>');

        //add a page.
        $('body').append('  <div data-role="page" id="page2" data-title="next page"><header data-role="header" class="header">  <h5>Page 2</h5></header><div data-role="content"><h3>Good Morning...</h3><a href="#page1">Back</a></div><footer data-role="footer" data-position="fixed"><h5>&copy; All rights reserved</h5></footer></div>');

    });

    window.onload = function() {
        $.mobile.initializePage();
    };

</script>
</head>
<body>
    <div data-role="page" id="page1">   
        <header data-role="header" class="header">
            <h5>jQuery Mobile</h5>
        </header>
        <div data-role="content">
            <form method="get" action="" data-transition="slideup">
                <label for="email">Email:</label>
                <input type="email" name="email" id="email" value=""/>              
            </form>
        </div>
        <footer data-role="footer" data-position="fixed"><h5>&copy; All rights reserved</h5></footer>
    </div>
</body>
</html>

添加动态链接到jQuery Mobile

2 个答案: