Conflit entre l'inscription à la newsletter de MailChimp et jQuery Slide

Question

J'ai une boîte d'inscription à la newsletter mailchimp et une diapositive jQuery qui sont en conflit. La diapositive ne s'arrête pas de fonctionner, mais l'inscription à la newsletter ne fait rien lorsque l'on clique sur le bouton de soumission. Il semble que la fonction de clic ait été désactivée par le jQuery utilisé pour la diapositive.

Code d'inscription à la lettre d'information :

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

Code des diapositives : (Lorsque je supprime la partie "input" de ce code, l'inscription au courrier électronique fonctionne correctement, mais les boutons Précédent/Suivant de la diapositive cessent de fonctionner).

    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

Soyez plus précis lorsque vous appelez le jQuery("input").click(apiHandler) . Si vous disposez d'un identifiant de conteneur, utilisez-le avant la saisie :

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

De cette façon, les entrées dans le code MailChimp ne seront pas affectées.