jjzjj

javascript - jQuery Mobile 1.4.5 - 导航到动态创建的页面时出错

coder 2024-07-20 原文

我已经用头撞墙几个小时了,但似乎仍然无法正常工作。

我正在制作一个 Web 应用程序,使用多页面模板(我的 index.html 中有多个页面。

目的:动态创建一个新页面,然后在屏幕上显示这个页面。

问题:创建页面并尝试更改到此页面后,我收到以下错误:Error: Syntax error, unrecognized expression: :nth-childjquery.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错误信息 是:

    Uncaught Error: Syntax error, unrecognized expression: :nth-child at jquery.mobile-1.4.5.min.js:3

    但请注意,如果使用自定义下载,行号可能会有所不同 或者如果使用调试版本。

  • 受影响的小部件:Navbar
  • 此错误与动态页面创建关系不大,因为它 也出现在静态页面中。这可以很容易地测试 以下标记:

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


因为这个问题收到了很多赞成票,这里是我关于使用 JQM 动态创建 HTML 片段的两分钱:

  1. 使用 JQM static 设计和测试最终生成的 HTML 片段 页,在Plunker .
  2. 如果静态模板有效,则将 HTML 片段放在一起。 ID 喜欢使用简单的文本连接,但这只是一个问题 个人编程风格和偏好(不要太接受这个 认真地) - 至少,如果你正在处理一个大模板,标签嵌套会立即清晰。

    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("");
    
  3. 最后,使用 append()只有一次。

如果有人感兴趣,很高兴听到一些关于 HTML 模板/片段创建的不同方法的性能的反馈。


请注意:

这篇文章标题中的问题已经被 Omar 回答了。很久以前: jquery mobile Dynamically Injecting Pages

关于javascript - jQuery Mobile 1.4.5 - 导航到动态创建的页面时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44951865/

有关javascript - jQuery Mobile 1.4.5 - 导航到动态创建的页面时出错的更多相关文章

  1. ruby - 如何在 Ruby 中顺序创建 PI - 2

    出于纯粹的兴趣,我很好奇如何按顺序创建PI,而不是在过程结果之后生成数字,而是让数字在过程本身生成时显示。如果是这种情况,那么数字可以自行产生,我可以对以前看到的数字实现垃圾收集,从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法,类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

  2. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  3. ruby - ECONNRESET (Whois::ConnectionError) - 尝试在 Ruby 中查询 Whois 时出错 - 2

    我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表,并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码),并打印以下消息。鉴于该程序非常简单,我已经没有什么想法了-有什么建议吗?/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.

  4. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库,所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  5. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  6. ruby-on-rails - 无法使用 Rails 3.2 创建插件? - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject),但我没有脚本/生成,只有脚本/rails,当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗?没有这个命令可以创建插件吗?PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布,插件生成器已经被移除。查看变更日志here.现在

  7. ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务? - 2

    如何使用RSpec::Core::RakeTask初始化RSpecRake任务?require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录;它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake

  8. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串? - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串?SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复?

  9. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常,除了该文件不是公开可用的,而且我无法获得它的公共(public)URL。但是当我登录到S3时,我可以正常查看我的文件。为了使其公开可用,我将最后一行更改为obj.upload_file(file

  10. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR,并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时,因为它没有自己的initialize方法

随机推荐