jQuery doesn't work in .html() return

Question

Hello all, I'm totally newbie on JQuery, I checked docs.jquery, searched on google, asked to friends, and still couldn't find the solution :(

I've a DIV with id=EMail. It includes a paragraph (<p>Please enter email...</p>) and a form (<form></form>). When visitor enters his/her email address to form input, and presses "Send" button, JQuery reads the input (email address) and send it to "addEMail.php". While doing this, <div id=EMail> shows only "<p>Please wait, blah blah</p>" and disable form (not disable, remove).

On addEMail.php, it returns two things;

• if the email address is valid, "<p>Thank you</p>".
• if it's not valid, "<p>Please enter valid email address</p><form>...</form>".

Returned html are shown in <div id=EMail>.

My problem is, if the email address is not valid, JQuery is not working on returned element. When button is clicked browser goes to addEMail.php.

To fix, I tried both GET and POST methods, added DataType: "html", checked both localhost, and normal host etc.

Thanks

JS in 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>

Form element in 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

This happens because if the email is not valid in your server script after the ajax is performed you recreate the button and it no longer has the click event handler attached to it, so the saveEMail function will not be called and it will simply submit the form. You can use the live function instead:

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

This way the browser will continuously watch if the button is recreated it will automatically reattach the event handler.

Another alternative would be to call $('.button').click( saveEMail ); again in the success callback of the ajax request which IMHO is not very good because it leads to repetitions.