使用< select>的jQuery focus（）事件的无限循环元件 [英] Infinite loop of jQuery focus() event with a <select> element

问题描述

我有这个HTML：

 < select id =select-one> 
< option value =>选择< / option> 
< option value =1> House< / option> 
< / select> 
 
< select id =select-two> 
< option value =>选择< / option> 
< option value =A>表< / option> 
< / select> 
  

而这个带有JQuery的Javascript

<$ p $ （$（＃select-one）.val（）== ）{
alert（首先填满选择！）;
返回false;
}

}）;

所以我得到一个无限循环警报，因为在调用 alert（） Javascript将焦点放在同一select（select-two）中。

有人可以帮我解决这个问题吗？

解决方案

注意：根据您的意见，假定您必须收听焦点事件。 b


$ b

从理论上讲，焦点事件是不可取消的，所以返回在这种情况下，false 或 event.preventDefault（）不起作用。但是，在实践中，您可以通过使用 blur（）方法来颠倒事件。 例如： / $>
$ b

  $（'＃select-two'）on（'focus'，function（）{
 if （＃select-one）。val（）==）{
 $（this）.blur（）; 
 alert（'Fill select-one first！'）; 
返回false; 
} 
}）; 
  

请参阅 $ b

这样可以有效地防止字段在警报之后重新获得焦点。 / code>调用，因此焦点事件不会重复。唯一的问题是，即使该领域不再集中，但在Chrome中，下拉菜单保持打开状态（请参阅演示）。



---





解决方案2 - 使用 remove（）和 clone（） - 代价高昂但跨浏览器 remove（） <从DOM中选择， clone（），然后将其重新插入到DOM中。这将有效地重置选择元素完全，让它没有焦点以及关闭。

例如

例如：

  $（document）.on（'focus'，'＃select-two'，function（e）{$ b $（＃select-one）。val（）==）{
 $（this）.remove（）。clone（）。insertAfter（'＃select-one'）; 
 alert（'先选择一个！'）; 
 return false; 
} 
}）; 
  

请参阅 jsFiddle demo

这种方法的好处是它在Chrome中也能很好的运行。这种方法的缺点是，它涉及操纵DOM的一个非常微不足道的问题。

I have this HTML:

<select id="select-one">
    <option value="">Choose</option>
    <option value="1">House</option>
</select>

<select id="select-two">
    <option value="">Choose</option>
    <option value="A">Table</option>
</select>

And this Javascript with JQuery

$("#select-two").focus( function() {

    if( $("#select-one").val() == "" ) {
        alert("Fill select-one first!");
        return false;
    }

});

So i am getting a infinite loop with alerts because after call alert() Javascript puts the focus again in the same select (select-two).

Someone can help me to solve this please?

解决方案

Note: based on your comments, this assumes you must listen to the focus event.

---

Solution 1 - using blur() - effective but buggy in Chrome

In theory, the focus event is not cancelable, so return false or event.preventDefault() will have no effect in this case. However, in practice, you can reverse the event by using the blur() method.

For example:

$('#select-two').on('focus',function () {
    if ($("#select-one").val() == "") {
        $(this).blur();
        alert('Fill select-one first!');
        return false;
    }
});

See jsFiddle demo

This effectively prevents the field from regaining focus after the alert call and so the focus event is not repeated. The only problem is that in Chrome even though the field is not focused anymore, the dropdown remains open (see demo).

---

Solution 2 - using remove() and clone() - costly but cross-browser

If Chrome's behavior is problematic, you can take a more crude approach, whereby you remove() the select from the DOM, clone() it and then reinsert it into the DOM. This will effectively "reset" the select element completely, leaving it without focus as well as closed.

For example:

$(document).on('focus','#select-two',function (e) {
    if ($("#select-one").val() == "") {
        $(this).remove().clone().insertAfter('#select-one');
        alert('Fill select-one first!');
        return false;
    }
});

See jsFiddle demo

The upside of this approach is that it works well in Chrome too. The downside of this approach is that it involves manipulating the DOM for a very trivial issue.

这篇关于使用&lt; select&gt;的jQuery focus（）事件的无限循环元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！