简单的Jquery切换不工作

Question

我有一个非常简单的Jquery函数，它模仿了许多在线教程中的代码，我看过几个类似的堆栈溢出问题，但我不明白为什么单击链接显示/隐藏名为“高级搜索”的div时什么都不会发生。(我也移除了土豆泥，但也没发生什么事。我在整个应用程序中都有其他的Jquery代码，而且都很好)。

articles/index.html.erb

    <div class="advanced-search">
       Some code
    </div>

    <a class="show-advanced-search">Advanced Search</a>

articles.js

$(document).ready(function(){
  $('.show-advanced-search').click(function(){
    $('.advanced-search').toggle();  
  });
});

将选择器缩小到'a.show-advanced-search'也不起作用。

编辑：

下面还有一个名为"articles.coffee“的Jquery文件，其中有一个ajax回调函数，认为它可能会影响其他jQuery代码。然而，我尝试删除"articles.coffee“，但问题仍然存在。

将articles.js中的代码复制并粘贴到浏览器控制台可以工作。浏览器控制台没有错误。

articles.coffee

jQuery(document).on 'change', 'select.sortBy', () ->
  $.ajax(
    url: $(this).data('url') + '?type=' + this.value
    type: 'GET'
    contentType: 'script'
    processData: false
  )
  return

我的原始application.js文件

//= require rails-ujs
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require jquery.transit.js
//= require turbolinks
//= require articles.js
//= require_tree .

Answer 1

如果您按照顺序包括了jquery.js和articles.js。那么下一个问题可能是turbolinks，如果你正在使用它。

$( document ).on('turbolinks:load', function() {
  // Do your code
})

注意:在Rails上，>= 4就在那里。请检查一下。

Answer 2

如果同时加载页面，则不会出现任何错误。但是，如果这是在单击按钮后出现的弹出代码的一部分，则应该尝试如下：

<pre>$(document).ready(function(){
  // we assum the pop-up container loads at the same time the page is loaded
  $('div.pop_up_container').on("click",".show-advanced-search",function(){
    $(this).next('.advanced-search').toggle();
  });
});</pre>

Answer 3

嗨，试试这个articles.js

    $(document).ready(function(){
  $('.show-advanced-search').click(function(){
    $('.advanced-search').toggle();  
  });
});

小提琴