Jquery mobile 在 rails 4 应用程序中不起作用答案

【问题标题】：Jquery mobile doesn't work in rails 4 appJquery mobile 在 rails 4 应用程序中不起作用
【发布时间】：2016-01-06 22:57:56
【问题描述】：

我举了一个 jquery 移动数据角色的例子，它在我的应用程序之外的浏览器中呈现良好，但是当我将代码放入我的 Rails 应用程序时，没有任何按钮呈现，并且 jquery mobile 似乎根本不起作用?

我这样做是否不当，还是我需要安装 jquery_mobile_rails gem 而不是简单地将 CDN 链接到头部？我已经安装了 jquery rails gem，并且其他 jquery 插件在我的应用程序中运行良好。嗯……

<!DOCTYPE html>
<html class="no js">
  <head>
    <title>Tumblful</title>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<!-- <link rel="stylesheet" type="text/css" href="css/demo.css" />
  <link rel="stylesheet" type="text/css" href="css/style1.css" /> -->
    <script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.1.0/readmore.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.0/theme-classic/theme-classic.css" />
    </head>

<%= yield :body || "<body>" %>



 <div data-role="page" data-theme="a">
 <div data-role="header" data-theme="a">
  <h1>My Title</h1>
  </div>
  <!-- /header -->
  <div data-role="content" data-theme="a">
    <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" onclick="FunctionToDoTask1();">BTN1</a>
    <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" onclick="FunctionToDoTask2();">BTN2</a>
    <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" href="#popUp1" data-rel="popup">BTN3</a>
    <a data-inline="true" data-corners="false" data-role="button" class="ui-link-inherit" href="#popUp2" data-rel="popup" onclick="FunctionToDoTask3();">BTN4</a>

        <a href="#" data-role="button">A simple Button</a>
  </div>
  <!-- /content -->
</div>
<!-- /page -->



  </body>
</html>

【问题讨论】：

标签： jquery ruby-on-rails jquery-mobile

【解决方案1】：

Rails 4 具有 TurboLinks，它实质上将您的应用程序转变为单页应用程序。因此，您的脚本不会在页面更改时运行。尝试将<body data-no-turbolink="true"> 添加到application.html.erb 的body 标签中，看看是否能解决您的问题！

【讨论】：