title: Javascript / jQuery not working on Blur
body: <p><strong>I have the following inputs on a form:</strong></p>
  
  <pre><code>&lt;input class="password" type="password" title="Your Password" name="password" size="30" autocomplete="off" value="" &gt;
  
  &lt;input class="confirmpass" type="password" title="Confirm Password" name="pass_confirm" size="30" autocomplete="off" value="" &gt;
    &lt;div class="jresults" align="left" style="display:none;" id="confirmdata"&gt;&lt;/div&gt;
  
    &lt;input class="showpassword" type="checkbox" title="Show Passwords"&gt;
  </code></pre>
  
  <p><strong>This is the show passwords function:</strong></p>
  
  <pre><code> //Show password function
  $(".showpassword").click(function()
      {
      var change = $(this).is(":checked") ? "text" : "password";
      var password = $("input.password"); 
      var showpass = $("&lt;input type='" + change + "' /&gt;")
                  .attr("id", password.attr("id"))
                  .attr("title", password.attr("title"))
                  .attr("name", password.attr("name"))
                  .attr("size", password.attr("size"))
                  .attr('class', password.attr('class'))
                  .val(password.val())
                  .insertBefore(password);
              password.remove();
              password = showpass;
      var confirmpass = $("input.confirmpass");
      var showconfirm = $("&lt;input type='" + change + "' /&gt;")
                  .attr("id", confirmpass.attr("id"))
                  .attr("title", confirmpass.attr("title"))
                  .attr("name", confirmpass.attr("name"))
                  .attr("size", confirmpass.attr("size"))
                  .attr('class',confirmpass.attr('class'))
                  .val(confirmpass.val())
                  .insertBefore(confirmpass);
              confirmpass.remove();
              confirmpass = showconfirm;     
      });   
  </code></pre>
  
  <p><strong>This is the confirm passwords match function:</strong></p>
  
  <pre><code>//match passwords entered
  $('.confirmpass').blur(function()
      {
      var Pass = $('.password').val();
      var cPass = $('.confirmpass').val();
      $('#confirmdata').css("display","none");
      if(cPass.length&gt;5)
        {
          if (Pass != cPass)
              {
                  $('#confirmdata').css("display","block");
                  $('#confirmdata').css("color","#ff0000");
                  $('#confirmdata').html("No Match");
                  $("input.confirmpass").focus();
              return; 
              }
          $('#confirmdata').css("display","block");
          $('#confirmdata').css("color","#00BB00");
          $('#confirmdata').html("Matched");
       }
      });
  </code></pre>
  
  <p><strong>Problem:</strong></p>
  
  <p>If passwords do not match and I correct them, the confirm password on blur will run again as expected..... <strong>This is correct</strong></p>
  
  <p>Now if the passwords do not match and I click the checkbox to show the passwords and then correct, the confirm password will <strong>NOT</strong> run again on blur.</p>
  
  <p>Can anyone see what could cause this?</p>