CODEWITHSUNDEEP
javascriptjqueryeventsjquery-events
AnchovyLegend
AnchovyLegend

Reputation: 12538

Blur event is triggered instead of click

When a user starts typing into an input field, the web app I'm working on generates drop down with auto-fill options, if a user clicks on one of the options, it populates the corresponding input fields with auto-fill text.

The web app contains many invoice lines, each having their own hidden auto-fill dropdown that is hidden until auto-fill options are available.

If a user clicks on an autofill option, I would like to update the order with this auto-fill text. If the user does not click on an autofill option and goes on to the next invoice line, I would still like to update the orderArray with the plain text the user entered.

To accomplish this, I tried using a blur event, however this blur event triggers regardless of whether or not a dropdown option was clicked, and I need to to be triggered if and only if a dropdown option from its corresponding line was not clicked.

I understand why the blur event is always getting triggered, however I am having an extremely difficult time overcoming this problem, by separating the two events and updating the order correctly.

I appreciate any suggestions.

$(".dropdown").on(click, ".item-option", function(){                
    //set item object with dropdown option text
    ...
    ...
    ...
    
    updateOrder(true, item);
    $('.dropdown').hide();

});
//if customer enters custom information without clicking on item option
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){

       updateOrder(false, {});
});
        
        
function updateOrder(clicked, item){
   if(clicked==true){
       //update order with the item information from the dropdown the user clicked
    }else{
      //update order by collecting all plaintext user entered into input fields
    }
}

Upvotes: 1

Views: 2564

Answers (2)

Vedant Terkar
Vedant Terkar

Reputation: 4682

Okay Have a look at these changes that I've made in your JS: I've Observed That:
click event triggers after the blur.
Instead of click use mousedown it will work.

Here Are The changes I've made in your JS:

$(".dropdown").on("mousedown", ".item-option", function(e){                
  e.stopPropagation();
//set item object with dropdown option text
...
...
...

updateOrder(true, item);
$('.dropdown').hide();
return false;

});
//if customer enters custom information without clicking on item option
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){

   updateOrder(false, {});
});


function updateOrder(clicked, item){
  if(clicked==true){
   //update order with the item information from the dropdown the user clicked
  }else{
  //update order by collecting all plaintext user entered into input fields
}
}

Hope It'll Help.. Cheers :)..

Upvotes: 4

Rajesh
Rajesh

Reputation: 3778

Try below code.

$(".dropdown").on(click, ".item-option", function(event){                
   //set item object with dropdown option text
   ...
   ...
   ...
   updateOrder(true, item);
   $('.dropdown').hide();
   event.stopPropagation();
});

//if customer enters custom information without clicking on item option
$('.id-input, .name-input, .price-input, .qty-input').blur(function(){
   updateOrder(false, {});
});


function updateOrder(clicked, item){
  if(clicked==true){
     //update order with the item information from the dropdown the user clicked
  } else{
    //update order by collecting all plaintext user entered into input fields
  }
}

stopPropagation is required only in click event because, once dropdown option clicked, blur also triggered, which we need to stop. Blur does not trigger click, so stopPropagation not needed there.

Upvotes: 0

Related Questions