打开其他链接后jquery点击事件不起作用答案

【问题标题】：jquery click event not working after opening other links打开其他链接后jquery点击事件不起作用
【发布时间】：2015-11-30 10:24:16
【问题描述】：

您好，我创建了一个 div 类 (.link_bar)，其中包含链接数。除此之外，我还有一些 div 类（.slide、.slide1、.slide2），我将它们用作 jquery 选择器。当我加载页面并单击 jquery 选择器时，单击事件工作正常。当我单击链接时，它也可以正常工作。但是，当我再次单击 jquery 选择器时，它不起作用。换句话说，jquery 可以正常工作，除非我不点击链接。

我的 jquery 脚本：

$(document).ready(function(){
$('.slide').click(function(){
$('.ext').slideToggle('fast');
});

$('.slide1').click(function(){
$('.cp').slideToggle('fast');
});

$('.slide2').click(function(){
$('.diff').slideToggle('fast');
});});

我的 CSS 包含：

div.link_bar {
  margin:0 auto;
  width: 0 auto;
  height:27px;
  background: rgba(255, 217, 179, .4);
  position: relative;
  bottom: -97px;  
  }

div.link_bar a {
  color:white;
  font-size: 13px;
  padding: 5px 4px 4px 6px;
  float: left;
  margin-right: 5px;
  cursor:pointer;
  text-decoration:none;
  }

div.link_bar .slide, .slide1 {
  float:left;
  margin-right: 5px;
  font-size: 13px;
  padding: 5px 4px 4px 6px;
  cursor:pointer;
  color: white;
}

div.link_bar .slide2 {
  color: white;
  font-size: 13px;
  padding: 5px 4px 4px 6px; 
  cursor:pointer;
}

/layouts/application.html.erb：

<!DOCTYPE html>
<html>
<head>
  <title>DataAutomate</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

  <%= csrf_meta_tags %>
</head>


<body>
<div class="top_bar">
<div class="foo_bar">
<div class="link_bar">
        <a href="/data/">DATA</a>
        <a href="/operators/">OPERATORS</a>
        <a href="/regions/">REGIONS</a>
        <a href="/links/">LINKS</a>
        <a href="/remov/">DELETE-ALL</a>
        <a href="/ofline/">EXTRACT-FILE</a>
        <div class="slide">EXTRACTOR</div>
        <div class="slide1">CREATE PACKS</div>
        <div class="slide2">DIFFER</div>
            <div style="clear:both;"></div>
        <div class="ext">
        <%= render :partial => "/data/do_extract.html.erb"%>
        </div>

        <div class="cp">
        <%= render :partial => "/data/create.html.erb"%>
        </div>

        <div class="diff">
        <%= render :partial => "/data/compare.html.erb"%>
        </div>


</div>      
</div>
</div>

<div id="center">

<%= yield %>

</div>
</div>
</body>
</html>

例子：

当我单击“提取器”时，div 类 (.ext) 会向下滑动，当我再次单击“提取器”时，它会向后滑动。 -- 这部分工作正常

当我点击“DATA”页面时，页面会被重定向到指定的链接。 --这部分也很好用。

当我再次点击“提取器”时，什么也没有发生——这就是问题所在。

非常感谢任何帮助。如果需要其他信息，请告诉我。

【问题讨论】：

标签： jquery ruby-on-rails css ruby-on-rails-4

【解决方案1】：

我怀疑这是使用时与 turbolinks 相关的问题

$(document).ready()

您应该尝试绑定到 turbolinks page:load 事件，例如

$(document).on('ready page:load', function () { 
  // your JS here
}

编辑：

Rails 实际上建议使用 page:change 事件而不是 page:load，值得查看 turbolinks 上的 Rails 文档了解更多背景/信息：http://guides.rubyonrails.org/working_with_javascript_in_rails.html#turbolinks

【讨论】：

此方法有效。谢谢。也谢谢你的链接。

【解决方案2】：

您可能想要绑定到文档：

$(document).on('click', '.slide1', function(){
 $('.cp').slideToggle('fast');
});

【讨论】：