Question

我的jquery移动版布局有一个包含两个按钮的导航栏。当点击一个按钮时，应该加载另一个文件（html5 + jquery-mobile）而不是因为没有调用相关的javascripts！但是，如果我个别加载该文件，就像魅力一样。外部链接调用不是解决方案，因为将错过转换。怎么解决？谢谢。

文件调用（jquery）

$("#head").append("<a href='"+linkIz+".html' data-role='button'  data-transition='flip'  data-icon="+iconoIz+" >"+textoIz+"</a>");

Answer 1

这是一个非常简单的解决方案。将所有站点的JS放在外部文件中，然后将该文件包含在每个HTML文档中。这样，无论用户登陆您网站的哪个页面，或者用户刷新页面，整个网站的所有JS都将可用。

您的文件可以包含此文件，以便在初始化时在每个页面上放置导航栏：

$(document).delegate('[data-role="page"]', 'pageinit', function () {
    $(this).children('[data-role="header"]').append("<a href='" + linkIz + ".html' data-role='button'  data-transition='flip'  data-icon=" + iconoIz + " >" + textoIz + "</a>");
});

确保使用事件委派，因为您不会确切知道DOM中的任何特定页面的确切时间。

此外，我假设#head是页面的data-role="header"元素，如果是这种情况，那么您应该将其更改为.head（类而不是ID），因为您可以同时在DOM中有多个页面，因此整个网站的所有ID都必须是唯一的。我通常给每个data-role="page"元素一个Id，然后我使用类在页面中更具体，这确保我不会创建具有可以同时在DOM中的相同ID的多个元素。

Answer 2

您可能只需刷新页面上的jQM功能，以便它知道通过ajax绑定a标记（链接）。你有没有试过这样的东西？

$("#head").trigger('refresh');

这是在您添加新链接之后。

希望这有帮助。

按钮单击事件时，jquery mobile不会加载文件

2 个答案: