ユーザーが入力フィールドへの入力を開始すると、私が取り組んでいる Web アプリは自動入力オプションを含むドロップダウンを生成します。ユーザーがオプションの 1 つをクリックすると、対応する入力フィールドに自動入力テキストが入力されます。
Web アプリには多くの請求明細行が含まれており、それぞれに独自の非表示の自動入力ドロップダウンがあり、自動入力オプションが使用可能になるまで非表示になっています。
ユーザーが自動入力オプションをクリックした場合、この自動入力テキストで注文を更新したいと思います。ユーザーが自動入力オプションをクリックせずに次の請求書行に進んだ場合でも、ユーザーが入力したプレーン テキストで orderArray を更新したいと思います。
これを達成するために、blurイベントを使用してみましたが、ドロップダウン オプションがクリックされたかどうかに関係なく、このぼかしイベントがトリガーされ、対応する行のドロップダウン オプションがクリックされなかった場合にのみトリガーされる必要があります。
ぼかしイベントが常にトリガーされる理由は理解していますが、2 つのイベントを分離して順序を正しく更新することで、この問題を克服するのは非常に困難です。
提案をいただければ幸いです。
よろしくお願いします！
$(".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
}
}