如何使用 JQuery.noConflict() 修复 Rails 3.2.12 中 JQuery 和 bootstrap 之间的冲突？答案

【问题标题】：How to use JQuery.noConflict() to fix conflict between JQuery and bootstrap in rails 3.2.12?如何使用 JQuery.noConflict() 修复 Rails 3.2.12 中 JQuery 和 bootstrap 之间的冲突？
【发布时间】：2013-05-10 23:36:55
【问题描述】：

$.noConflict()被添加到rails 3.2.12主应用程序中的application.js中，以解决jquery和bootstrap之间的冲突。但是它没有按预期工作。这是application.js：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .
//= require bootstrap

$.noConflict();

点击新客户表单上的add_more_contact链接时，firebug出现错误：

ReferenceError: add_fields is not defined

add_fields是application.js中定义的js函数：

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).parent().before(content.replace(regexp, new_id));
}

add_fields的调用是通过application_controller.rb中的一个方法来完成的：

def link_to_add_fields(name, f, association)
  new_object = f.object.class.reflect_on_association(association).klass.new
  fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
    render :partial => association.to_s, :locals => {:f => builder, :i_id => 0} 
  end
  link_to_function(name, "add_fields(this, \"#{association}\", \"#{j fields}\")")
end

代码在引导之前工作。使用noConflict() 有什么问题？我们还需要将noConflict() 添加到/views/layouts/application.html.erb 吗？感谢您的帮助。

更新：这是新客户页面的标题：

【问题讨论】：

我之前都用过没有调用noConflict，你试过吗？
最近添加了引导程序。在此之前，jquery（datepicker，使用 add_fields 插入 html 等）对我们来说已经很好了。但是 jquery 在引导后停止工作。你有没有做过什么特别的事情让他们两个一起工作？
不，我什么都没做。
查看jsbin.com/ekiyiy/1/edit
数据选择器正在页面上工作。不知何故，它在我们的页面上不起作用。

标签： ruby-on-rails twitter-bootstrap jquery

【解决方案1】：

jquery 和 bootsrap 没有冲突，相反，jquery 是 bootstrap 工作的必要条件。

但是 jquery-ui 和 bootstrap 之间存在冲突，http://addyosmani.github.io/jquery-ui-bootstrap/ 的一个项目已经解决了这个问题。

无论如何，我认为上面的代码应该可以在不调用 noConflict 的情况下工作。

【讨论】：

刚刚用调用add_fields的js函数的link_to_add_fields方法更新了帖子。不知何故，jquery-ui 和 jquery 在引导后停止工作。我们该如何解决这个问题？