MailChimp 通讯注册与 jQuery 幻灯片冲突

Posted 2023-03-24

【中文标题】MailChimp 通讯注册与 jQuery 幻灯片冲突

【英文标题】：MailChimp Newsletter Signup Conflicting with jQuery Slide

【发布时间】：2013-06-02 23:43:09

【问题描述】：

我有一个 mailchimp 通讯注册框和一个 jQuery 幻灯片冲突。幻灯片不会停止工作，但是当单击提交按钮时，时事通讯注册不会执行任何操作。用于幻灯片的 jQuery 似乎禁用了单击功能。

简报注册码：

    <!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
    <form action="http://seasonsfour.us7.list-manage.com/subscribe/post?u=218dcaf8b440a1bd002f249a0&amp;id=d81a674a64" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div class="mc-field-group">
        <input type="email" value="" name="EMAIL" class="required email newslettersignupfield" id="mce-EMAIL" placeholder="Enter your email here...">
    </div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>
    <div class="clear">
        <input type="image" src="images/button-newsletter-signup.jpg" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="newslettersignupbutton">
    </div>
    </form>
</div>
<!--End mc_embed_signup-->

幻灯片代码：（当我删除此代码的“输入”部分时，电子邮件注册工作正常，但幻灯片上的上一个/下一个按钮停止工作。）

    var api;
jQuery(document).ready(function() 
api =  jQuery('.banner-simple').revolution(
    
        delay:5000,
        startheight:388,
        startwidth:1000,

        hideThumbs:200,

        thumbWidth:100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
        thumbHeight:50,
        thumbAmount:5,

        navigationType:"none",              // bullet, thumb, none
        navigationArrows:"none",                // nexttobullets, solo (old name verticalcentered), none

        navigationStyle:"custom",               // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom

        navigationHAlign:"center",              // Vertical Align top,center,bottom
        navigationVAlign:"bottom",                  // Horizontal Align left,center,right
        navigationHOffset:0,
        navigationVOffset:20,

        soloArrowLeftHalign:"left",
        soloArrowLeftValign:"center",
        soloArrowLeftHOffset:20,
        soloArrowLeftVOffset:0,

        soloArrowRightHalign:"right",
        soloArrowRightValign:"center",
        soloArrowRightHOffset:20,
        soloArrowRightVOffset:0,

        touchenabled:"on",                      // Enable Swipe Function : on/off
        onHoverStop:"on",                       // Stop Banner Timet at Hover on Slide on/off

        stopAtSlide:-1,
        stopAfterLoops:-1,

        shadow:1,                               //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)
        fullWidth:"off"                         // Turns On or Off the Fullwidth Image Centering in FullWidth Modus
    );
);



var tpj=jQuery;
tpj.noConflict();

tpj(document).ready(function() 

// listen for slide change event

api.bind("revolution.slide.onpause",function (e,data) 
    jQuery('#callbackinfo').html('Last Event: Timer Pause ');
);

api.bind("revolution.slide.onresume",function (e,data) 
    jQuery('#callbackinfo').html('Last Event: Timer Resume ');
);

// bind to button click
jQuery("input").click(apiHandler)

function apiHandler(e) 
    switch (e.currentTarget.id) 
        case "pause":
            api.revpause();
        break;
        case "resume":
            api.revresume()
        break;
        case "prev":
            api.revprev()
        break;
        case "next":
            api.revnext()
        break;

    
    return false;

);

【参考方案1】：

拨打jQuery("input").click(apiHandler) 时要更加具体。如果你有一些容器 ID，那么在输入之前使用它：

jQuery("#id_container input").click(apiHandler)

这样，MailChimp 代码中的输入不会受到影响。

【讨论】：

工作就像一个魅力。谢谢！