触发模糊事件而不是单击

Question

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
    }
}

Answer 1

Okay Have a look at these changes that I've made in your JS: I've Observed That:
.
Instead of click use 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 :)..

Answer 2

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.