Rails - jQuery和javascript之间的冲突

时间:2016-04-24 09:59:04

标签: javascript jquery ruby-on-rails

我在将Gems加载到Rails 4应用程序时遇到问题。

我使用jQuery。在我的application.js中,我有:

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require masonry.pkgd.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require gmaps/google
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require dependent-fields
//= require bootstrap-slider

$.noConflict();
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
    $(document).ready(function() {
        DependentFields.bind()
    });
});


//= require_tree .

在我的gem文件中,我正在尝试使用rails dependent fields gem。那个宝石也需要underscore.js。

我认为这个宝石不起作用的原因是因为它使用了javascript。

我遇到了与disqus rails gem相同的问题(这会引发localhost /的错误:94 Uncaught TypeError:$不是函数

有谁知道如何解决rails jQuery和javascript之间的冲突?

2 个答案:

答案 0 :(得分:1)

问题在于您已通过以下行设置jQuery以noConflict模式运行:$.noConflict();。 jQuery不会全局定义$变量,只能通过jQuery变量。

$.noConflict();   // <=====  HERE  ======
jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
    $(document).ready(function() {
        DependentFields.bind()
    });
});

&#34;插件&#34;提出此错误的人可能期望设置$变量。但他们不应该这样做。

您有2个选项:

  1. $.noConflict();文件中删除application.js行。
  2. 将引发此错误的代码包装到$设置为jQuery变量的函数中。
  3. 像这样:

    (function($){
      // Here: $ === jQuery
      // Put js code that raises error here
    })(jQuery);
    

    此外,您在代码中使用了2个文档就绪事件。你可以改进它:

    $.noConflict();
    jQuery( document ).ready(function( $ ) {
      // Code that uses jQuery's $ can follow here.
      DependentFields.bind()
    });
    

答案 1 :(得分:0)

尝试将javascript代码包装在使用匿名函数的$ variable中:

(function($){

// put your code here

})(jQuery);