Function still runs when id is changed

Question

I've got some simple code right here:

$('#username').on('input paste', function(){
    if($(this).val().length >3 && $(this).val().length <= 16){
        $(this).css('background-image', 'url(images/register_related/input_box_success.png)');
        usr = 1;
        dat_usr = $('#username').val();
        console.log('Correct Stuff Username');
    }
    else if($(this).val().length == 0){
        $(this).css('background-image', 'url(images/register_related/input_box_rq.png)');
        usr = 0;
    }
    else {
        $(this).css('background-image', 'url(images/register_related/input_box_error.png)');    
        usr = 0;
    }
});

Later on I change the id of #username to #password:

$('#username').attr({id:'password', type:'password'});

When checking source of the page, it shows as password, not username, but the function used for #username still applies. Why is this happening and how can it be avoided?

The page source will not update when you manipulate the DOM with javascript http://stackoverflow.com/questions/1750865/best-way-to-view-generated-source-of-webpage — geedubb, Jan 01 '14 at 22:36

score 0 · Answer 1 · answered Jan 02 '14 at 00:04

0

As codehorse said on the comments, you have to use:

$('#username').off();

answered Jan 02 '14 at 00:04

Giwrgos Tsopanoglou

1,165
2
8
15

Function still runs when id is changed

1 Answers1