简单的jquery切换不工作

我有一个非常简单的jquery函数，它模仿许多在线教程中的代码，我已经看过几个类似的stackoverflow问题，但我不明白为什么没有任何反应，当我点击链接显示/隐藏名为“高级搜索”的div。（我也删除了turbolink，但没有任何反应，我在应用程序中还有其他的Jquery代码，所有工作都很好）。简单的jquery切换不工作

文章/ 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”下面用Ajax回调是另一个jQuery的文件，认为这可能会影响其他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 .

来源

2017-10-14 doyz

浏览器控制台中的任何错误？在脚本代码之前添加了jQuery库吗？你有没有在当前的HTML文件中包含你的js文件？ –

我无法复制它 – brk

@AlivetoDie jQuery代码只有在我将其粘贴到控制台并启动它时才起作用。是的，我添加jQuery库 – doyz

。但是，如果这是出现点击一个按钮后，你应该试试这个弹出的部分代码：

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

来源

2017-10-14 07:52:27 Jar3d

喜试图以此为articles.js

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

jsfiddle

来源

2017-10-14 08:14:57

如果您已包含jquery.js和articles.js的顺序。那么下一个问题可能是turbolinks如果你正在使用它。

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

注：上滑轨> = 4有它的。请检查。

来源

2017-10-14 08:37:21

我通过结合articles.coffee和articles.js文件来修复它。

articles.coffee

jQuery(document).on 'click', 'a.show-advanced-search',() -> 
    $('.advanced-search').toggle()

好像有2个独立的文件，甚至无论是在application.js中不起作用指定。

来源

2017-10-14 10:01:28 doyz

简单的jquery切换不工作

回答

相关问题