dynamic - 将动态链接添加到 jQuery Mobile

Question

我阅读了很多有关如何在 jquery Mobile 中动态添加内容的信息，但我不知道如何添加链接。

目前我的解决方案是这样的:

1. 添加一个新页面 - 使用 id (id="list-1")
2. 为其创建链接 (href="#list-1")

此解决方案在静态页面中非常有效，但我想动态地进行。我已经尝试了很多 page() 之类的东西，但没有任何帮助。

我的问题是:

1. 如何添加动态链接和页面？
2. 我是否选择了正确的方式来使用 id 和 anchor (#list-1) 作为链接，或者是否有其他适用于 jquery mobile 的解决方案？

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

Answer 1

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

(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 加载您的下一个页面时，您可能希望动态加载该页面，并且您可以使用这个 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 中使用的工作流程，它一直运行良好。不过，我猜测在未来的版本中，它们将内置某种支持将动态参数传递给页面的功能。