0

当用户开始在输入字段中输入内容时，我正在开发的 Web 应用程序会生成带有自动填充选项的下拉菜单，如果用户单击其中一个选项，它会使用自动填充文本填充相应的输入字段。

Web 应用程序包含许多发票行，每行都有自己隐藏的自动填写下拉菜单，在自动填写选项可用之前一直隐藏。

如果用户单击自动填充选项，我想使用此自动填充文本更新订单。如果用户没有点击自动填充选项并继续下一个发票行，我仍然想用用户输入的纯文本更新 orderArray。

为此，我尝试使用一个blur事件，但是无论是否单击了下拉选项，都会触发此模糊事件，并且当且仅当未单击相应行的下拉选项时才需要触发该事件。

我理解为什么模糊事件总是被触发，但是我很难通过分离两个事件并正确更新顺序来克服这个问题。

我很感激任何建议。

提前谢谢了！

$(".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
    }
}
4

2 回答 2

2

好的，看看我在您的 JS 中所做的这些更改：我已经观察到：
在 blur 之后触发 click 事件。
而不是单击使用mousedown它将起作用。

以下是我在您的 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
}
}

希望它会有所帮助..干杯:)..

于 2013-09-29T15:09:13.240 回答
0

试试下面的代码。

$(".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 仅在单击事件中是必需的，因为一旦单击下拉选项，模糊也会触发，我们需要停止。模糊不会触发点击，因此那里不需要 stopPropagation。

于 2013-09-29T15:01:29.210 回答