Question

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

Answer 1

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/