ruby on rails 4 / jquery / javascript：按钮仅在页面重新加载后才有效

Question

编辑：看看我自己对正在发生的事情的解释。任何RoR专家都欢迎提供有关正在发生的事情的良好解释。

我的浏览器控制台（firefox和chrome）中没有错误消息。当我通过链接但是重新加载时，Javascript / jquery不起作用。 ?????

您可以在

中看到此错误

http://new.mapmill.org:3000/

单击标题部分中的“浏览网站”，然后选择“Medellín”作为图像集（仅当前存在的图像集）。您将被重定向到此图像集。

点击“上传此网站的更多图片”或“查看地图” - 没有任何反应。 如果你重新加载页面，“为这个网站上传更多图片”有效（你将被重定向到登录，但没关系）。

似乎javascript在这个页面上没有被正确加载，并且jquery根本不起作用。如果我没有任何错误消息可能会出错，并且在重新加载时一切都很好吗？

编辑：该应用程序是一个ruby on rails应用程序。这些按钮不是动态加载的，下面是两个按钮的相关show.html.erb文件部分：

<h1>Site details</h1>
<div class="site_information">
<h2 style="display: inline-block; margin-right: 20px"><%= @site.name %></h2><div class="site_img_num"><%= @site.images.count %> images</div>
<button style="margin-left: 20px; padding: 10px; margin-bottom: 10px" id="upload_more" class="btn btn-primary">Upload more pictures for this site</button>
<button style="margin-left: 20px; padding: 10px; margin-bottom: 10px" id="show_map" class="btn btn-success">View Map</button>

 <%= hidden_field_tag 'site_id', @site.id %>
</div>

Answer 1

我无法打开您的链接，但我认为问题是因为您的html是动态创建的。如果是这样，您必须在创建后附加所有事件侦听器，或者使用附加到未动态加载的某些元素的委托事件（简单情况下为$（document）.on（...））。 请在此处查看详细信息http://api.jquery.com/on/#direct-and-delegated-events

Answer 2

http://new.mapmill.org:3000/assets/sites.js

的第433行

$('#upload_more').click(function() {
  return window.location.href = '/sites/' + $('#site_id').val() + "/upload";
});

您正在为DOM准​​备好绑定事件处理程序，但您的页面内容是动态加载的。因此，在绑定事件时，$('#upload_more')甚至不存在于DOM中。

在我的经历中，这通常发生在有人第一次开发单页应用程序（又称SPA）时。检查devtool中的绑定事件（Elements中的Event Listeners选项卡），你会发现出错了。

Answer 3

这听起来像是一个常见的Turbolinks问题。非常值得阅读他们的文档，以了解它对js文件和文档就绪函数的作用。 Turbolinks on Github

如果事实证明是Turbolinks，那么总结一下如何解决这个问题。

第一个是你的js的解决方法已经过了很多时间。

var ready;

ready = function(){
  //your js scripts go here
};

$(document).ready(ready);
$(document).on('page:load', ready);

或者您可以更新您用于访问此页面的link_to帮助程序，以便在加载页面时跳过turbolink：

<%= link_to "Where you're going", add_product_path, data: { no_turbolink: true } %>

或者您可以尝试使用'jquery-turbolinks' gem，但您可能需要花一些时间使用他们的文档来确保您已正确实现它（即它不仅仅是复制粘贴和捆绑更新类型经验）。

Answer 4

这可能归咎于我自己没有正确理解Ruby on Rails和资产管道如何工作。我还是不太明白。但事实上，似乎RoR处理的是一种app应用程序。

所以当我登陆主页时，运行$（document）.ready。此时，＃upload_more尚未存在，因为我没有加载网站列表，并且点击绑定不适用。

当我进入网站列表时，页面再次没有重新加载，因此绑定因某种原因不起作用。

我这样解决了：

<button style="margin-left: 20px; padding: 10px; margin-bottom: 10px" onclick="window.location.href='/sites/<%= @site.id %>/upload'" id="upload_more" class="btn btn-primary">Upload more pictures for this site</button>

<button style="margin-left: 20px; padding: 10px; margin-bottom: 10px" onclick="window.location.href='/sites/<%= @site.id %>/map'" id="show_map" class="btn btn-success">View map</button>

因此在按钮中添加内联动作。它完全可以满足我的需求，并且不需要任何jquery绑定。

如果任何Ruby On Rails专家在某些时候会提出并提供一些很好的解释，以供将来参考。

我为这个问题的质量很差道歉，因为它归结为我自己使用的技术我并不精通。一直在学习...