MailChimp jQuery 冲突答案

【问题标题】：MailChimp jQuery ConflictMailChimp jQuery 冲突
【发布时间】：2011-04-02 05:32:15
【问题描述】：

我一直在将 MailChimp 集成到我正在设计的网站中度过最美妙的时光！

问题是验证不适用于嵌入式订阅表单。该表单不是内联错误消息，而是将用户引导至 MailChimp 注册页面以纠正错误或确认列表选择加入。

我已经对代码进行了大量的自定义，所以很遗憾回到默认设置不是一个选项。

这是我遇到的错误，但我是 JS n00b，所以我不知道它们是什么意思：

Break on Error mce_jQuery is not defined:

我不认为这是可以通过控制台捕获的错误。

奇怪的是这个。如果我撕掉自定义代码并从 MailChimp 发布静态代码，它会以某种方式工作，但我已经复制了所有具有重要功能的相关代码，但仍然没有骰子。

您可以在以下位置查看该网站：http://ranya.net/wp/contact

MailChimp 列表注册位于右上角的滑动下拉列表中。相关脚本嵌入在 div#top_mailing 之后。

【问题讨论】：

标签： javascript debugging conflict mailchimp

【解决方案1】：

或者你可以简单地在 mailChimp.js 中重命名这个变量：

var mce_jQuery = jQuery.noConflict();

到

var mce_jQuery = jQuery;

不知道为什么 MailChimp 开发人员决定用一种方法重写美元符号。

【讨论】：

【解决方案2】：

Alec Smart 的回答几乎是正确的。通过在 NoConflict 模式下运行 jQuery，问题得到解决。 Alec 建议我添加 jQuery.noConflict();在文档的标题中。事实证明，MailChimp 嵌入代码中有一行被注释掉了。为了正确启用 MailChimp 脚本搜索的 noConflict 模式

 //var mce_jQuery = jQuery.noConflict();

删除评论，使其看起来像这样

 var mce_jQuery = jQuery.noConflict();

然后你应该好好去！ :)

【讨论】：

【解决方案3】：

使用 jquery 1.8.1 和截至 2013 年 5 月 28 日的最新 mailchimp 代码

我找不到上面的评论来取消评论。

但是我可以看到这个 mailchimp 代码：

function mce_init_form(){
jQuery(document).ready( function($) {

我对此的理解不是很好，但这会重新分配默认的 jquery $ 变量。

然而，在后面的代码中是这样的：

function mce_success_cb(resp){
$('#mce-success-response').hide()

这让 mailchimp 代码出错了

我改成

function mce_success_cb(resp){
jQuery(document).ready( function($) {
$('#mce-success-response').hide();

它有效。不太清楚为什么（并且希望得到解释！）但我想我会发布，因为有人可能会以与我相同的方式遇到这个问题。

【讨论】：

太棒了！很高兴它有帮助
您是否在新行 jQuery(document).ready( function($) { 中添加了右括号？如果有，在哪里？
抱歉久违了！我认为结束括号一定是在所有与#mce-success-response 相关的代码之后出现的。如果这没有帮助，请告诉我，我会查一下（我需要弄清楚这是在哪个项目上！！）

【解决方案4】：

我对上述任何解决方案都不满意，可能是因为最后一个答案已有一年多的历史，并且不再反映当前的 mailchimp 代码。

为了解决我的 jQuery 冲突，我从 http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js 复制了 MailChimp 提供的 mc-validate.js 脚本并将其放在我们自己的服务器上。然后我美化了它并从文件中删除了jquery代码。这样，现在我们的服务器上只剩下我们的 jquery 版本，不再有任何冲突。

看起来，您也不再需要 var $mcj = jQuery.noConflict(true); 行了。

@mailchimp：这个问题的一个很好的解决方案是，如果你可以在你的亚马逊服务器上提供不同版本的代码，不包括 jquery。

【讨论】：

【解决方案5】：

尝试将此代码移到顶部的右侧（例如紧跟在<head> 标记之后）：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>jQuery.noConflict();</script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.validate.js"></script>
<script type="text/javascript" src="http://downloads.mailchimp.com/js/jquery.form.js"></script>

【讨论】：

很好的尝试，但是不，移动后，它仍然没有进行内联验证:(
您正在代码中加载 2 个版本的 jQuery。你确定要这样做吗？
你几乎是对的，亚历克！请参阅下面的答案以获取解决方案:)