javascript MailChimp jQuery 冲突

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3540770/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 01:27:17  来源:igfitidea点击:

MailChimp jQuery Conflict

javascriptdebuggingconflictmailchimp

提问by Brian

I've been having the most AWFUL time integrating MailChimp into a site I'm designing!

在将 MailChimp 集成到我正在设计的站点中,我度过了最糟糕的时光!

The problem is that validation is not working for the embedded subscribe form. Instead of inlining error messages, the form is kicking the user over to the MailChimp signup page to correct errors or confirm list opt in.

问题是验证不适用于嵌入的订阅表单。该表单没有内嵌错误消息,而是将用户踢到 MailChimp 注册页面以纠正错误或确认列表选择加入。

I've done a heavy amount of customization to the code, so unfortunately going back to the default is not an option.

我已经对代码进行了大量自定义,因此不幸的是,回到默认值不是一种选择。

Here are the errors I'm getting, but I'm a JS n00b so I don't know what they mean:

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

Break on Error mce_jQuery is not defined:

中断错误 mce_jQuery 未定义:

Screen shot 2010-08-22 at 4.34.50 AM.jpg

屏幕截图 2010-08-22 at 4.34.50 AM.jpg

I don't think it's an error that can be caught with the console though.

我不认为这是一个可以用控制台捕获的错误。

The weird thing is this. If I rip out the custom code and just post the static code from MailChimp it somehow works, but I've copied all the relevant code with important functions and still no dice.

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

You can view the site live at: http://ranya.net/wp/contact

您可以在以下网址实时查看该站点:http: //ranya.net/wp/contact

The MailChimp list signup is in the top right corner sliding dropdown. The relevant scripts are embedded just after div#top_mailing.

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

采纳答案by Brian

Alec Smart's answer was ALMOST correct. By running jQuery in NoConflict mode the issue was resolved. Alec suggested that I add jQuery.noConflict(); in the header of the document. It turns out that there is a line in the MailChimp embed code that is commented out. In order to properly enable the noConflict mode for the MailChimp script search for

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

 //var mce_jQuery = jQuery.noConflict();

Remove the comment so that it looks like this

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

 var mce_jQuery = jQuery.noConflict();

and then you should be good to go! :)

然后你就可以出发了!:)

回答by Kenneth Hein M?ller

Or you can simply just rename this variable in the mailChimp.js:

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

var mce_jQuery = jQuery.noConflict();

to

var mce_jQuery = jQuery;

Don't know why the MailChimp developers decided to rewrite the dollar-sign with a method.

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

回答by user1010892

Using jquery 1.8.1 and the latest mailchimp code as of 28th may 2013

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

I couldn't find the above comment to uncomment it.

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

I could however see this mailchimp code:

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

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

My understanding of this isn't great but this re-assigns the default jquery $ variable.

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

However, later in the code there was this:

但是,后来在代码中有这样的:

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

which was tripping the mailchimp code up

这是绊倒mailchimp代码

I changed it to

我把它改成

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

and it works. Not quite sure why (and would love an explanation!) but thought I'd post as someone might come across this question in the same way as I did.

它有效。不太确定为什么(并且希望得到解释!)但我想我会发布,因为有人可能会以与我相同的方式遇到这个问题。

回答by rassoh

I had no luck with any of the above solutions, probably because the last answer is more than a year old and doesn't reflect the current mailchimp code anymore.

我对上述任何解决方案都不满意,可能是因为最后一个答案已经超过一年了,并且不再反映当前的 mailchimp 代码。

To solve my jQuery conflicts, I copied the mc-validate.jsscript that MailChimp serves from http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.jsand put it on our own server. Then I beautified it and removed the jquery code from the file. That way, now there is only our version of jquery left on our server and nothing con conflict anymore.

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

As it looks, you will also not need the line var $mcj = jQuery.noConflict(true);anymore.

看起来,您也将不再需要该线路var $mcj = jQuery.noConflict(true);

@mailchimp: a great solution for this problem would be if you could just provide a different version of the code on your amazon servers, that doesn't include jquery.

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

回答by Alec Smart

Try moving this code to right at the top (like immediately after <head>tag):

尝试将此代码移动到顶部的右侧(例如在<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>