Dynamic 向jQuery Mobile动态添加链接_Dynamic_Hyperlink_Jquery Mobile

Dynamic 向jQuery Mobile动态添加链接

dynamic hyperlink jquery-mobile

Dynamic 向jQuery Mobile动态添加链接,dynamic,hyperlink,jquery-mobile,Dynamic,Hyperlink,Jquery Mobile,我读了很多关于如何在jquery mobile中动态添加内容的书，但我不知道如何添加链接目前，我的解决方案如下所示：添加一个新页面-id为（id=“list-1”）为其创建链接（href=“#列表-1”）这个解决方案在静态页面中工作得很好，但我想动态地完成它。我用page（）和类似的东西尝试了很多，但没有任何帮助我的问题是：如何添加动态链接和页面我是否选择了正确的方式使用ID和锚（#list-1）作为链接，或者jquery mobile是否有其他解决方案如果您需要更多信息来添加动

我读了很多关于如何在jquery mobile中动态添加内容的书，但我不知道如何添加链接

目前，我的解决方案如下所示：

添加一个新页面-id为（id=“list-1”）

为其创建链接（href=“#列表-1”）

这个解决方案在静态页面中工作得很好，但我想动态地完成它。我用

page（）

和类似的东西尝试了很多，但没有任何帮助

我的问题是：

如何添加动态链接和页面

我是否选择了正确的方式使用ID和锚（#list-1）作为链接，或者jquery mobile是否有其他解决方案

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

那么您的事件侦听器将类似于：

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

当jQuery Mobile加载下一个页面时，您可能希望动态加载此页面，并且可以使用此passedParameter变量。要动态加载页面，只需添加一个等待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中使用的工作流，它一直工作得很好。不过，我猜测在未来的版本中，它们将内置某种对向页面传递动态参数的支持

对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>


$（document）.bind（“mobileinit”，function（）{
$.mobile.autoInitializePage=false；
});
$（文档）.ready（函数（）{
//添加一个链接。
$（“#第1页div[data role='content']”）。追加（“”）；
//添加一个页面。
$（'body'）.append（'Page 2Good Morning…©；保留所有权利'）；
});
window.onload=函数（）{
$.mobile.initializePage（）；
};
jquerymobile
电邮：
&抄袭；版权所有

.page（）

仅对一个DOM节点及其子节点工作一次。您必须重新创建一个元素才能再次使用

.page（）

Hanks@naugtur..您的上述评论节省了我宝贵的时间…非常感谢您的回答，我的回答非常类似，但我的问题是，如果您使用ListView创建链接，jquery mobile无法识别添加页面的新链接（id:），然后添加.listview（）和.listview（'refresh'）将允许JQuery Mobile识别新链接。如果您在不使用listview的情况下创建链接，并且仍然希望传递这些参数，您可以将链接指定为而不是，并在该div上定义侦听器。侦听器可以保存中指定的传递参数，然后调用.changePage（'my-page-2'）。希望有帮助！是的，我就是这么想的，我必须通过参数使用它，并为.changePage（）使用一个自编码函数。没有使用jquery mobile本身链接的选项？没有。。。在alpha3版本中，似乎没有任何内置的方式来动态创建链接到动态生成的页面的链接。关于这一点，互联网上还有很多其他的讨论。如果您找到更好或更优雅的解决方案，请让我知道！

<!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>