jQuery Mobile 1.4.5-导航到动态创建的页面上的毛病-英雄云拓展知识分享

匿名投稿 324 2024-01-22

我已撞到墙上了几个小时，仿佛依然没法正常工作。

我正在使用多页模板制作Web利用程序（我的 index.html.

客观的： 动态创建一个新页面，然后在屏幕上显示此页面。

问题： 创建页面并尝试更改此页面后，我会收到以下毛病： Error: Syntax error, unrecognized expression: :nth-child 在 jquery.mobile⑴.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手机 毛病。问题中发布的毛病消息是毛病的，由于 jquery.mobile.js 图书馆已重命名为 jquery.js.
经过使用标准 jquery.mobile⑴.4.5.min.js 毛病消息是：
未知毛病：语法毛病，未辨认的表达式：： jquery.mobile⑴.4.5.min.js：3
但是请注意，如果使用自定义内涵下载或使用调试版本，则行号可能会有所不同。
受作用的小部件： NAVBAR

此毛病与动态页面的创建无关，由于它也会在静态页面中产生。可以经过以下标记轻松测试：

<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile⑴.4.5.css">
<script src="https://code.jquery.com/jquery⑴.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile⑴.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> 将在Navbar内部 <ul>.

由于这个问题已收到了许多投票，所以这是我的两分钱，讲述了使用JQM的HTML作品的动态创建：

使用JQM设计和测试终究产生的HTML片断 静态页面，在 Plunker.
如果静态模板行之有效的，然后将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模板/片断创建不同方法的性能的一些反馈。

旁边的笔记：

本文标题中包括的问题已回答奥马尔很久之前： jQuery移动动态注入页面

🚀🌟 点击注册免费试用超级应用平台-英雄云企业级hpapaas 🌟🚀 😃👉🌐

免责声明：

本网址（www.yingxiongyun.com）发布的材料主要源于独立创作和网友匿名投稿。此处提供的所有信息仅供参考之用。我们致力于提供准确且可信的信息，但不对材料的完整性或真实性作出任何保证。用户应自行验证相关信息的正确性，并对其决策承担全部责任。对于由于信息的错误、不准确或遗漏所造成的任何损失，本网址不承担任何法律责任。本网站所展示的所有内容，如文字、图像、标志、音频、视频、软件和程序等的版权均属于原创作者。如果任何组织或个人认为网站内容可能侵犯其知识产权，或包含不准确之处，请即刻联系我们进行相应处理。