Mailchimp 的 $mcj = jQuery.noConflict(true) 导致冲突

Posted 2023-03-24

【中文标题】Mailchimp 的 $mcj = jQuery.noConflict(true) 导致冲突

【英文标题】：Mailchimp's $mcj = jQuery.noConflict(true) causing conflict

【发布时间】：2014-08-27 06:08:56

【问题描述】：

我正在尝试将 MailChimps 的标准 html 表单集成到我的网站中。但是，我的网站有一些 jquery 代码遇到了 MailChimp 代码的问题。

以下代码是 MailChimp 嵌入表单的一部分：

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-  validate.js'></script>
<script type='text/javascript'>
(function($) 
window.fnames = new Array(); window.ftypes = new   Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';
(jQuery));
var $mcj = jQuery.noConflict(true);
</script>

“....mailchimp.com/js/mc-validate.js”与我的 Google API for jquery 冲突，因此我取消了 mailchimp 的 jquery 激活。

我的问题是：

我的 .html 文件中是否必须包含 mailchimp /mc-validate.js 行 运行表单的代码或者我可以依赖

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'> </script>?

如果我确实删除了本机 mailchimp jquery 行并依赖 googleapi 行，我遇到了问题 $mcj=jQuery.noConflict(true) 代码。

基本问题是：有没有人有将 Mail Chimp 集成到他们的网站并遇到 jQuery 这类问题的经验？

期待您的回答。

【问题讨论】：

这里有同样的问题。 Mailchimp 脚本污染了全局命名空间并导致 JQUery 变得未定义。

如果您想获得特定问题的答案，请发布一些更具体的 html 和 js 或包含指向相关页面的链接。如果没有这些详细信息，我们只能根据提供的信息尽可能地回答。

我有完全相同的问题，只是我的 jquery.easing.js 定义的缓动函数变得未定义。如果我删除jQuery.noConflict(true) 行，一切似乎都正常。为什么他们有它？

你找到解决办法了吗？

【参考方案1】：

我知道你问这个问题已经 3 个月了，但如果其他人有同样的问题，这里有一个解释。

为了回应下面的评论，我创建了一个简单的 html 示例，其中包含指定的 jquery 版本和经典的 mailchimp 表单。如您所见，没有抛出任何错误。 (http://thepixel.ninja/lab/mailchimp-signup-form/)。

您收到的错误很可能是页面上某些其他脚本的原因。不过，如果没有您提供更多信息，这是不可能的。

如果您对调试不太了解，这里是一些简单修复的细分以及可能发生的情况的解释。

我是否必须在我的 .html 代码中包含 mailchimp /mc-validate.js 行才能运行表单，或者我是否可以依赖

这是两个不同的脚本。一种是 jQuery 本身，一种是 mailchimp 验证代码。如果您需要来自 mailchimp 的 js 验证，则不需要 /mc-validate.js 行。如果这是演员表，请按照以下说明进行操作。不要只是删除这条线，希望一切都会好起来。

注意。如果您不需要验证码，那么您可以在 mailchimp 网站上创建表单时勾选“禁用所有 JavaScript”复选框。这将消除所有 js 错误。 （您也可以选择“裸表单”而不是“经典表单”，然后使用 css 为表单设置样式以显示您想要的样式）。

如果我确实删除了本机 mailchimp jquery 行并依赖 googleapi 行，我遇到了问题 $mcj=jQuery.noConflict(true) 代码。

如上所述。它们是两个不同的脚本。您不能删除一个并依赖另一个，因为它们做的事情完全不同。

话虽如此，mailchimp 脚本不应该以任何方式与 jquery 冲突。我已经使用了数百次 mailchimp 表单和 jquery 并且从来没有遇到过问题。 （请参阅上面的链接）如果您以任何方式编辑了提供给您的 mailchimp html sn-p，或者您在页面上包含的其他 javascript 中存在其他错误，则可能会出现此问题。

希望这可以帮助某人找出他们在消除过程中遇到的问题。

【讨论】：

不能解决问题。当问题实际上是问题时，将问题视为“没有问题”。

更多关于什么错误的信息以及你的 html 和 js 的实际设置需要完全回答这个问题。我只是评论这样一个事实，即不涉及其他变量，并使用从指定的源指定的 jquery 版本以及来自此处找到的 mailchimp 网站的默认 mailchimp 注册表单（必须登录）“列表”->“您在此处的列表名称”->“注册表单”->“嵌入式表单”->“经典”，未更改任何选项，不会引发任何错误。在此处查看我的示例-> thepixel.ninja/lab/mailchimp-signup-form

还有答案可以帮助人们了解 mailchimp 注册表单的工作原理，并尝试帮助提问者了解 javascript 库 jQuery 和 mailchimp 验证代码之间的区别。我相信它回答了他的两个问题。没有必要仅仅因为 id 不能解决您的问题而投反对票。如果您需要解决问题的帮助，我相信如果您包含复制错误的适当示例，人们会提供帮助。

【参考方案2】：

因此，如果您像我一样，您可能不需要在每个页面上都使用 Mailchimp。此示例假设您在需要时通过 jQuery 加载它，但这个想法仍然适用于在页面加载时内联加载它：

var tmp = jQuery.noConflict(); //This jQuery is the one we want

            jQuery.getScript("//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js", function()
                (function($) window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='CGROUP';ftypes[3]='dropdown';(jQuery));

              //Let mailchimp set its own jQuery, destroying window.jQuery
                var $mcj = jQuery.noConflict(true);

              //Now, restore the copy of jQuery we saved
                window.jQuery = tmp.noConflict();

             //At this point, things should be as they were before we loaded mailchimp

            );

为了回答其他一些用户的问题，他们之所以有这行是因为 Mailchimp 期待 jQuery 的特定版本（目前为 1.9.0）。另外，假设在您的示例中，我们正在使用缓动插件。这会修改 window.jQuery，但 Mailchimp 会加载一个 不同 版本的 jQuery，它不会包含您添加到页面上的任何插件。我相信他们最初的想法是每个人都会先加载他们的脚本（这是一个可接受的替代解决方案）。但是，这种方法的问题是我们从最佳实践中知道，来自外部站点的 JS 应该最后加载，而不是首先加载

【参考方案3】：

您可以在程序中简单地使用此代码留置权

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-  validate.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript'>
(function($) 
   window.fnames = new Array(); 
   window.ftypes = new Array();
   fnames[0]= 'EMAIL';ftypes[0]='email'; 
   fnames[1]='FNAME';ftypes[1]='text';  
   fnames[2]='LNAME';ftypes[2]='text';
   ());
   var $mcj = $.noConflict(true);
 </script>

【讨论】：

我只会添加这段代码，以便我们将所有内容都放在一个地方（包括表单的翻译） $mcj.extend($mcj.validator.messages, required: "Your required message到这里。", email: "请输入有效的电子邮件地址信息。", );

【参考方案4】：

如果您的应用程序包含自己的 jQuery 版本，并且您的 jQuery 脚本标签包含在 之前 MailChimp 的 mc-validate.js 脚本，那么 MailChimp 包含的 jQuery 版本（在撰写本文时为 v1.9.0 ) 将与您现有的 jQuery 对象冲突并导致问题。

因为我不想为我的应用程序修改脚本包含顺序，所以对我来说最简单的解决方案是备份我现有的 jQuery 对象，然后包含 MailChimp 脚本，然后恢复 jQuery 对象：

<!-- Backup our jQuery object -->
<script type='text/javascript'>
    var jQueryBackup = jQuery.noConflict();
</script>

<!-- Include MailChimp scripts -->
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>(function($) window.fnames = new Array();  /* Etc. This will be specific to your MailChimp form */ (jQuery));var $mcj = jQuery.noConflict(true);</script>

<!-- Restore our jQuery object -->
<script type='text/javascript'>
    window.jQuery = jQueryBackup;
</script>

注意：带有两个 MailChimp 脚本标签的中间部分对于您的嵌入表单将是唯一的，因此不要复制并粘贴上面的那部分。使用 MailChimp 为该部分提供的脚本。