JiF*_*Fus 8 javascript jquery-mobile
我现在已经在墙上撞了几个小时了,但似乎仍然无法让它发挥作用.
我正在制作一个Web应用程序,使用多页面模板(在我的网页中有多个页面)index.html.
目标:动态创建新页面,然后在屏幕上显示此页面.
问题:创建页面后,尝试更改到此页面时出现以下错误:Error: Syntax error, unrecognized expression: :nth-childin jquery.mobile-1.4.5.js:1850:8
相关代码可以在下面找到:
JavaScript的
// Add the page to the DOM
$.mobile.pageContainer.append(page);
// Change the page
$.mobile.pageContainer.pagecontainer('change', $('#' + pageId));
HTML
页面已创建并添加到<body>,所以我将省略HTML部分.
我认为页面可能没有注册到pagecontainer,这会出错？我看了,但似乎没有一个pagecontainer刷新方法.
有想法该怎么解决这个吗？
编辑1:
使用上述代码导航到另一个页面,例如主页工作正常.唯一不起作用的页面是新创建的页面.
编辑2:
看来我创建的页面会产生错误.用于导航到页面的代码工作正常.
我用来创建页面的代码:
var page = $('<div/>', {
id: pageId,
'data-role': 'page',
'data-dom-cache': 'false',
});
var content = $('<div/>', {
'data-role': 'content',
});
var courseTabs = $('<div/>', {
'data-role': 'tabs',
});
var courseNavbar = $('<div/>', {
'data-role': 'navbar',
}).append($('<ul/>'));
var courseBtn = $('<a/>', {
href: '#',
class: 'ui-btn',
text: 'testbutton',
});
// Glue the page parts together in the page.
courseTabs.append(courseNavbar);
content.append(courseTabs).append(courseBtn);
page.append(content);
// Add the page to the DOM
$.mobile.pageContainer.append(page);
// Navigate to the page
$.mobile.pageContainer.pagecontainer("change", page, {
transition: "flip"
});
上面的代码会产生错误.
我认为这个问题需要澄清：
这不是jQuery错误，这是jQuery Mobile错误。问题中发布的错误消息是错误的，因为该
jquery.mobile.js库已重命名为jquery.js.
通过使用标准，jquery.mobile-1.4.5.min.js错误消息是：
未捕获错误：语法错误，无法识别的表达式： :nth-child at jquery.mobile-1.4.5.min.js:3
但请注意，如果使用自定义下载或使用调试版本，行号可能会有所不同。
此错误与动态页面创建关系不大，因为它也会出现在静态页面中。这可以使用以下标记轻松测试：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="navbar">
<ul>
<!-- no <li> here -->
</ul>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
<li>解决方案：导航栏内至少有一个<ul>。
如果静态模板有效，则将 HTML 片段放在一起。我想使用简单的文本连接，但这只是个人编程风格和偏好的问题（不要太认真） - 至少，如果您正在处理一个大模板，标签嵌套是立即清除。
var html = [
'<div data-role="navbar">',
'<ul>',
'<li><a href="'+link1+'" class="ui-btn-active">'+text1+'</a></li>',
'<li><a href="'+link2+'">'+text2+'</a></li>',
'</ul>',
'</div>'
].join("");
最后，append()只使用一次。
如果有人感兴趣，很高兴听到一些有关 HTML 模板/片段创建的不同方法的性能的反馈。
这篇文章标题中包含的问题很久以前 就已经被Omar回答过： jquery mobile 动态注入页面