如何让 jQuery 与 Prototype 一起工作
好的，情况是这样的。我一直在为这件事揪心。
我对此很菜鸟。仅使用 Rails 大约 6 周。我正在使用标准安装包，并且我的代码大量利用原型助手。就像我说的，菜鸟；）
所以我尝试添加一些 jQuery 效果，例如 PrettyPhoto。但实际情况是，当页面首次加载时，PrettyPhoto 效果很好。但是，一旦有人使用 Prototype 助手（例如使用 link_to_remote 创建的链接），Prettyphoto 就会停止工作。
我已经尝试过 jRails，JQuery 站点上建议的所有修复以阻止冲突...
http://docs .jquery.com/Using_jQuery_with_Other_Libraries
...甚至做了一些疯狂的事情，比如将prototype.js中的所有$重命名为$$$，但无济于事。要么原型助手崩溃，要么 jQuery 崩溃。
看来我做什么都无法让这些一起工作。
有什么想法吗？
这是我的 application.html.erb 的一部分
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'tooltip' %>
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag "jquery.prettyPhoto" %>
<%= javascript_include_tag 'prototype' %>
<%= javascript_include_tag 'scriptalicious' %>
</head>
<body>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(
function() {
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
如果我将原型放在 jquery 之前，原型助手将不起作用 如果我放入 noconflict 子句，则两者都不起作用。
提前致谢！
Chris
顺便说一句：当我尝试这个时，从 jQuery 站点：
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
我的页面消失了！
Ok so here is the situation. Been pulling my hair out on this one.
I'm a noob at this. Only been using rails for about 6 weeks. I'm using the standard setup package, and my code leverages prototype helpers heavily. Like I said, noob ;)
So I'm trying to put in some jQuery effects, like PrettyPhoto. But what happens is that when the page is first loaded, PrettyPhoto works great. However, once someone uses a Prototype helper, like a link created with link_to_remote, Prettyphoto stops working.
I've tried jRails, all of the fixes proposed on the JQuery site to stop conflicts...
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
...even done some crazy things likes renaming all of the $ in prototype.js to $$$ to no avail. Either the prototype helpers break, or jQuery breaks.
Seems nothing I do can get these to work together.
Any ideas?
Here is part of my application.html.erb
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'tooltip' %>
<%= javascript_include_tag 'jquery' %>
<%= javascript_include_tag 'jquery-ui' %>
<%= javascript_include_tag "jquery.prettyPhoto" %>
<%= javascript_include_tag 'prototype' %>
<%= javascript_include_tag 'scriptalicious' %>
</head>
<body>
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(
function() {
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
If I put prototype before jquery, the prototype helpers don't work
If I put the noconflict clause in, neither works.
Thanks in advance!
Chris
BTW: when I try this, from the jQuery site:
<script>
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
my page disappears!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您应该使用
jQuery.noConflict();，此后对 jquery 的所有调用都应该仅使用jQuery()而不是 $() 来完成>you should use
jQuery.noConflict();and after this all calls to jquery should be done only using thejQuery()insteadof $()看来你快到了。我想你想要这样的东西：
我不确定你在 jQuery 网站上找到了什么示例，但是 jQuery("div").hide();看起来它隐藏了页面上的所有 div，这就是页面消失的原因。没有冲突就是你所需要的。
如上所述，对 javascript 重新排序意味着您可以将内联 JS 包含在 application.js 中，有些人会认为这更整洁。
Looks like you're almost there. I think you want something like this:
I'm not sure what example you found on the jQuery site, but jQuery("div").hide(); looks like it is hiding all the divs on your page, which is why your page disappears. The no conflict is what you need.
Reordering of the javascript includes as above means you can include your inline JS in application.js instead, which some would consider neater.
将以下文件中的 $ 符号更改为 jQuery，
首先包含 jquery 文件，然后包含原型。
希望它能解决问题
change $ symbol to jQuery in these following files
include jquery file first and then include prototype.
Hope it will solve the problem
您可以做很多事情。
其中之一是检查加载 javascript 标签的顺序。通常应用程序应该在最后进行。
如果您使用 jrails，则根本不需要加载原型和脚本库。
我谦虚地建议您尝试以下操作：
由于您正处于开发周期的开始阶段，因此您可以仅使用 jquery 库并完全消除原型。 jQuery 方面有更多的选择。
我并不是说这是每个人都应该做的，但在你的具体情况下这似乎是合理的。
There are a number of things you can do.
One of them is to check the order in which you load your javascript tags. Typically application should come at the end.
If you use jrails you don't need to load the prototype and scriptaculous libraries at all.
I humbly suggest you try the following:
Since you are at the beginning of your development cycle you could use only jquery libraries and eliminate prototype altogether. There is so much more choice on the jQuery side.
I'm not saying this is what everybody should do but in your specific case it seems reasonable.