Ruby China

Rails [已解决] 在 rails 里用 jquery 的插件的 bug

tony612 · 2012年09月28日 · 最后由 Tony612 回复于 2012年09月29日 · 3688 次阅读

用到了一个幻灯片的插件easySlider, 这里有demo

单独的一个 demo 文件是没问题的，不过在 rails（3.2.8）里，就怎么都显示不出来 easySlider.js加载没有问题。在 Chrome 的 console 里看$.fn，easySlider.js加载的时候有easySlider这个函数，不过到了pages.js.coffee里，像这样

$(document).ready ->
  $("#slider").easySlider({
    auto: true,
    continuous: true,
    numeric: true
  })

调试的时候看到，在 ready() 的时候$.fn还有easySlider，不过在ready里边的时候，也就是$("#slider").easySlider({这行的时候就没了，于是就有Object has no method 'easySlider'

觉得很奇怪。。刚在 stackoverflow 里发帖问，不过每人回应，就跑到这里了，恳求帮忙～～

cantin #1 2012年09月28日

$("#slider") 找的到元素吗？

tony612 #2 2012年09月28日

#1 楼 @cantin 嗯可以的 没有问题 关键是不知道为什么连$.fn都没easySlider了

cantin #3 2012年09月28日

试一下不使用 coffee，另外 coffee 的 hash 写法可以更简便一些，你可以看一下。 如果还有问题，可能是加载顺序，检查一下页面上 js 的加载顺序。

ruby_sky #4 2012年09月28日

调整加载顺序，先加载 easySlider，后加载你写的文件，另外 Rails 没有 3.8.2 版本。

tony612 #5 2012年09月28日

#4 楼 @ruby_sky 哦 打错了是 3.2.8

tony612 #6 2012年09月28日

#3 楼 @cantin 嗯 刚刚改成 js 方便调试，这样

$(document).ready(function(){

  $("#slider").easySlider({
    auto: true,
    continuous: true,
    numeric: true
    });
}
);

然后调试的时候发现，在最后一行);的时候，$.fn.easySlider还是正常的，下一步就跳到了$("#slider").easySlider({这行，然后$.fn.easySlider就变成undefined了。。奇怪了。。感觉像是 javascript 的问题

cantin #7 2012年09月29日

自己写的单独的 demo 可以成功吗？我看它 demo 上的 jquery 是 1.2.3 的。。。。

tony612 #8 2012年09月29日

#7 楼 @cantin 嗯 可以的 开始我也以为是 jquery 版本问题，不过写了个 demo，用 1.8.1 的 jquery 版本，虽然没写 css，不过 js 还是没问题的，调试的时候发现 rails 项目里的那个一到$("#slider").easySlider({的时候，$就会变成$: function (e,t){return new v.fn.init(e,t,n)}，$("#slider")变成$("#slider"): v.fn.v.init[1]，demo 的还是不变的：$是$: function ( selector, context ) {， $("#slider")还是$("#slider"): jQuery.fn.jQuery.init[1]

tony612 #9 2012年09月29日

#7 楼 @cantin 嗯 好了 解决了 应该是 application.js 问题，之前部署的时候预编译过 所以有了冲突 然后把 public/assets 里的删了就好了 不过还是谢谢啦～～

需要 登录 后方可回复, 如果你还没有账号请 注册新账号