Jquery script stops working when I change, then reload original elements to be selected

Having a few issues with jquery .html(). Below is a code which changes a text box input value from "Enter email address" to "" when they focus, and if they haven't entered anything, puts "Enter email address" back on blur.

I'm using jquery .html() with .post() to phpmailer to update the containing div with "Sending..." "Successfully sent" "Failed", etc.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $("#emailaddressinput").focus(function(){
          if ($(this).val() == 'Enter email address') {
               $(this).val('');
          }
     });
     $("#emailaddressinput").blur(function(){
          if (!$.trim($(this).val())) {
               $(this).val('Enter email address');
          }
     });
});
</script>

Here's the code that POSTS to p开发者_如何学Chpmailer. On success the response is 'true'. However, when it fails, it uses dotimeout.js to delay 3 seconds and then uses jquery .html to put the original form back in place. When it does this, the above code doesn't work anymore. At the bottom is my original html.

<script src="lib/dotimeout.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('#emailbutton').click(function(e) {
          e.preventDefault();
          var email = $('#emailaddressinput').val();
          //write 'sending...' or something
          $('#emailinputcontainer').html('Sending, please wait.');
          var generated_coupon_id = '2';
          var dataString = 'email=' + email + '&generated_coupon_id=' + generated_coupon_id;
          $.post('send.php', dataString, function(data){
               //do stuff
               if(data=='true'){
                    //say "message sent!"
                    $('#emailinputcontainer').html('Your coupon has been emailed!');
               } else {
                    //say error
                    $('#emailinputcontainer').html('There was an error. Please try again.');
                    $.doTimeout(3000,function() {
                         $('#emailinputcontainer').html('<input id="emailaddressinput" type="text" value="Enter email address" /><a id="emailbutton" href="#" style="margin: 0 !important;"><span class="buttontext" >Email coupon</span></a>');
                    });
               }
          });
     });
});
</script>

Here is the original html of the form:

<div id="emailinputcontainer">
    <input id="emailaddressinput" type="text" value="Enter email address" /><a id="emailbutton" href="#" style="margin: 0 !important;"><span class="buttontext" >Email coupon</span></a>
</div>

How do I get my original script at the top of this page to work again when the email fails and I use .html() to reload the original contents.

EDIT: Actually, I tinkered further and now the .post() won't work which is much more important!

What you are looking for is .live(). When you call $("#emailaddressinput").focus() jQuery finds the element #emailaddressinput in the DOM and binds the function to that element. When you replace the html in your javascript it is no longer the same element, but rather a new one that looks the same. .live() continues to watch the DOM for changes and binds to new elements as they are created.

for information on using .live see http://api.jquery.com/live/

The problem you're having is that you're creating an element in called "emailaddressinput", assigning an event listener, deleting it along with the event listener, and then creating a new "emailaddressinput" element that looks just like it except that no events are bound.

You could break out your JavaScript into a function:

function bindEmailEvents() {
     $("#emailaddressinput").focus(function(){
          if ($(this).val() == 'Enter email address') {
               $(this).val('');
          }
     });
     $("#emailaddressinput").blur(function(){
          if (!$.trim($(this).val())) {
               $(this).val('Enter email address');
          }
     });
}

Then you would call bindEmailEvents on $(document).ready, and after $('#emailinputcontainer').html(...) is used.

On a side note, depending on your target audience you could take advantage of HTML5 placeholder text to serve a similar function and remove the JavaScript code:

<input placeholder="Enter email address" ...>

Also, it would probably be better practice to show and hide your content rather than adding and removing HTML:

<div id="emailmessagecontainer" style="display:hidden"></div>
<div id="emailinputcontainer"></div>

On post start, you would call:

$("#emailmessagecontainer").show().text(message);
$("#emailinputcontainer").hide();

On error, you could do:

$("#emailmessagecontainer").hide();
$("#emailinputcontainer").show();