MailChimp jQuery 冲突

Posted

技术标签:

【中文标题】MailChimp jQuery 冲突【英文标题】:MailChimp jQuery Conflict 【发布时间】: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 之后。

【问题讨论】:

【参考方案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。你确定要这样做吗? 你几乎是对的,亚历克!请参阅下面的答案以获取解决方案:)

以上是关于MailChimp jQuery 冲突的主要内容,如果未能解决你的问题,请参考以下文章

MailChimp jQuery 冲突

Mega-Menu 和 MailChimp 表单之间的 Jquery 冲突

两个 Javascript 之间的冲突(MailChimp 验证等脚本和 jQuery hSlides.js)

Vs 引用第三方DLL文件 版本不一致问题 (npoi与memcached中的ICSharpCode.SharpZipLib版本冲突的解决方案)

jQuery基础—— 解决jQuery冲突

如何解决jquery与zepto冲突问题