jQuery ne fonctionne pas dans .html() retour

Question

Je suis tout à fait novice sur JQuery, j'ai vérifié docs.jquery, cherchai sur Google, demandé à des amis, et ne pouvait toujours pas trouver la solution :(

J'ai un DIV avec id = EMail.Il comprend un paragraphe (<p>Please enter email...</p>) et un formulaire (<form></form>) Lorsque le visiteur entre son adresse e-mail pour former une entrée, et appuie sur le bouton "Envoyer", JQuery lit l'entrée (email .. l'adresse) et l'envoyer à "addEMail.php" Tout en faisant cela, <div id=EMail> montre que "<p>Please wait, blah blah</p>" et la forme désactiver (disable pas, supprimer)

Sur addEMail.php, il retourne deux choses;

• si l'adresse e-mail est valide, "<p>Thank you</p>".
• si ce n'est pas valide, "<p>Please enter valid email address</p><form>...</form>".

Le code html renvoyé est représenté en <div id=EMail>.

Mon problème est que, si l'adresse email n'est pas valide, JQuery ne fonctionne pas sur l'élément retourné. Lorsque le bouton est cliqué, le navigateur va à addEMail.php.

Pour fixer, j'ai essayé les deux méthodes GET et POST, ajouté DataType: "html", à la fois vérifié localhost et hôte normal etc.

Merci de

JS dans index.php;

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.button').click(saveEMail); 
}); 

function saveEMail() 
{ 
var userEMail = $('form').serialize(); 
$('#eMail').html('<p>Please wait while saving your email: </p>'.userEMail); 
$.ajax({ 
    type: 'POST', 
    url: 'http://localhost/addEMail.php', 
    dataType: 'html', 
    data: userEMail,  
    success: function(result) { 
    $('#eMail').html(result); 
    } 
}); 
return false; 
} 
</script> 

Elément de formulaire dans index.php;

<div class="box" id="eMail"> 
    <p>Please blah blah blah</p> 
    <form name="addEMail" action="http://localhost/addEMail.php" method="post"> 
    <input type="text" name="eMail" /> 
    <input class="button" type="submit" value="Send" /> 
    </form> 
</div> 

addEMail.php;

<?php 

if (checkEmail($email) == FALSE) { 
    echo("<p>Please enter a valid email address</p>"); 
    echo("<form ... </form>"); // exactly same form as above 
} 
else { 
    echo("<p>thank you blah blah</p>"); 
} 

?> 

Answer 1

Cela se produit parce que si l'e-mail est pas valide dans votre script serveur après vous ajax est effectué recréez le bouton et il n'a plus le gestionnaire d'événements, cliquez attaché, de sorte que la fonction saveEMail ne sera pas appelé et il vous suffit de soumettre le formulaire. Vous pouvez utiliser la fonction live à la place:

$(document).ready(function() { 
    $('.button').live('click', saveEMail); 
}); 

De cette façon, le navigateur montre de façon continue si le bouton est recréée il automatiquement refixer le gestionnaire d'événements.

Une autre alternative serait d'appeler à nouveau $('.button').click(saveEMail); dans le rappel success de la requête ajax qui à mon humble avis n'est pas très bon car il conduit à des répétitions.