Javascript / jQuery not working on Blur

Question

I have the following inputs on a form:

<input class="password" type="password" title="Your Password" name="password" size="30" autocomplete="off" value="" >

<input class="confirmpass" type="password" title="Confirm Password" name="pass_confirm" size="30" autocomplete="off" value="" >
  <div class="jresults" align="left" style="display:none;" id="confirmdata"></div>

  <input class="showpassword" type="checkbox" title="Show Passwords">

This is the show passwords function:

 //Show password function
$(".showpassword").click(function()
    {
    var change = $(this).is(":checked") ? "text" : "password";
    var password = $("input.password"); 
    var showpass = $("<input type='" + change + "' />")
                .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 = $("<input type='" + change + "' />")
                .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;     
    });   

This is the confirm passwords match function:

//match passwords entered
$('.confirmpass').blur(function()
    {
    var Pass = $('.password').val();
    var cPass = $('.confirmpass').val();
    $('#confirmdata').css("display","none");
    if(cPass.length>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");
     }
    });

Problem:

If passwords do not match and I correct them, the confirm password on blur will run again as expected..... This is correct

Now if the passwords do not match and I click the checkbox to show the passwords and then correct, the confirm password will NOT run again on blur.

Can anyone see what could cause this?

Answer 1

When clicking the checkbox you're inserting dynamic content to the page that's why the blur doesn't work after that. Replace the function declaration

$('.confirmpass').blur(function()

with

$(document).on('blur', '.confirmpass', function()