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

Question

我正在尝试将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'与我的谷歌API的jquery冲突，所以我拿出mailchimp的jquery激活。

我的问题是:

我必须有mailchimp/mc-validate.js行在我的。html代码来运行表单，或者我可以依赖

<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问题的经验?

期待您的回答。

Answer 1

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

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

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

如果你不太了解调试，这里有一些简单的修复，并解释了可能发生的事情。

1. 我是否必须在我的。html代码中有mailchimp/mc-validate.js行来运行表单，或者我可以依赖

& lt;脚本src = " http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js "> ?

这是两个不同的脚本。一个是jQuery本身，另一个是mailchimp验证代码。你不需要/mc-validate.js行，如果你需要从mailchimp的js验证。如果这是cast，那么按照下面的说明。不要只是删掉这一行就希望一切都会好起来。

NB。如果你不需要验证码，那么当你在mailchimp网站上创建表单时，你可以勾选"禁用所有JavaScript"复选框。这将消除所有js错误。(你也可以选择"裸表单"而不是"经典表单"，然后用css样式设置表单，使其看起来像你想要的那样)。

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

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

话虽如此，mailchimp脚本不应该以任何方式与jquery冲突。我已经使用mailchimp表单和jquery数百次了，从来没有出现过问题。(见上面的链接)如果您以任何方式编辑了提供给您的mailchimp html片段，或者如果您在页面上包含的其他javascript中有其他错误，则可能会发生此问题。

希望这能帮助人们通过排除法解决他们遇到的问题。

Answer 2

所以，如果你像我一样，你可能不需要在每个页面上都安装Mailchimp。这个例子假设您在需要时通过jQuery加载它，但是这个想法仍然适用于与页面load:

内联加载它。

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)。同样，假设在你的例子中，我们使用的是easing插件。这将修改窗口。jQuery，但是Mailchimp加载了一个不同的版本的jQuery，它不会有您添加到页面上的任何插件。我相信他们最初的想法是每个人都先加载他们的脚本(这是一个可接受的替代解决方案)。然而，这种方法的问题是我们从最佳实践中知道，外部站点的JS应该最后加载，而不是首先加载

Answer 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>

Answer 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为该部分提供的脚本。