jQuery blur event triggers twice

Question

I am using jQuery-1.4.4 in one of my projects and I have been facing a problem, ie, blur event for one of the input element is triggers twice.Please help me and the functionality is given below.

$(function () {
    $('.cardnumber').keyup(function () {
        //Need to call a function
    }).focus(function () {
        //Need to call a function
    }).blur(function () {
        console.log('blur');
    });

    $('.cardnumber').focus().blur(); 
});

Answer 1

just remove $('cardnumber').focus().blur() has be default it will trigger on load just use .

$(function () {
    $('.cardnumber').keyup(function () {
        //Need to call a function
    }).focus(function () {
        //Need to call a function
    }).blur(function () {
        console.log('blur');
    });
});

it should trigger only after you have entered the value in the cardnumber

Answer 2

As can be seen in the following demo, blur triggers only once. Therefore, it is safe to say that some other piece of code must be responsible for the second trigger.

One way the issue can be caused is if you have a second .cardnumber element in your markup. Therefore, check to ensure you have one or if there are more and you wish to target just one, then use: $('.cardnumber').first().focus().blur(); to target the first, for example.

Also as noted in the comments use a current version of jQuery.

 $(function () { $('.cardnumber').keyup(function () { //Need to call a function }).focus(function () { //Need to call a function }).blur(function () { console.log('blur'); }); $('.cardnumber').focus().blur(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <input class="cardnumber" type="text" name="cardnumber" /> 

TWO Elements : - blur triggers twice

  $(function () { $('.cardnumber').keyup(function () { //Need to call a function }).focus(function () { //Need to call a function }).blur(function () { console.log('blur'); }); $('.cardnumber').focus().blur(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <input class="cardnumber" type="text" name="cardnumber1" /> <input class="cardnumber" type="text" name="cardnumber2" /> 

SOLUTION -- target one

  $(function () { $('.cardnumber').keyup(function () { //Need to call a function }).focus(function () { //Need to call a function }).blur(function () { console.log('blur'); }); $('.cardnumber').first().focus().blur(); }); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <input class="cardnumber" type="text" name="cardnumber1" /> <input class="cardnumber" type="text" name="cardnumber2" /> 

Answer 3

$(function () {
    $('.cardnumber').live('keyup', function () {
        //Need to call a function
    }).live('focus', function () {
        //Need to call a function
    }).live('blur', function () {
        console.log('blur');
    });

    $('.cardnumber').focus().blur(); 
 });

When I updated the functionality as shown above, then it's working fine and I don't have any idea why it's working fine.Please give me a clarification if you know what's difference with and without of live keyword in this particular case.