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?

You are removing the elements from the DOM which will also remove the event handlers attached to it (obviously.) Now, the new elements added don't have this event handler binded. I believe this can be easily solved by using event delegation instead — Alexander, Jan 07 '13 at 20:41

score 3 · Accepted Answer · answered Jan 07 '13 at 17:38

3

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()

answered Jan 07 '13 at 17:38

AlecTMH

2,320
20
24

these function are already inside of a document ready function. Will that make a difference, or do I need to break the confirmpass out on its own? Thankyou for the quick response. – ROY Finley Jan 07 '13 at 17:41
See answer from Alexander below, when you're deleting elements from document their handlers are deleted as well, after that you're re-adding them but the handlers are lost. `on()` method automatically attaches the handler to the elements for now and in the future while `blur()` attaches the handler to existing elements only. – AlecTMH Jan 07 '13 at 17:47

Javascript / jQuery not working on Blur

1 Answers1