jquery - MailChimp 时事通讯注册与 jQuery Slide 冲突

Question

我有一个 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;
}
});

Answer 1

调用 jQuery("input").click(apiHandler) 时要更加具体。。如果您有一些容器 ID，请在输入之前使用它:

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

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