[英]jQuery change() on <select> and firefox
I have a dropdown that triggers an ajax call when its changed: 我有一个下拉列表,当它改变时触发ajax调用:
$('.travel-to').change(function(){
$.ajax({
type: "GET",
url: "/inc/rates/rates-viewer.php",
data: "shtech=y&c_name="+escape($(this).val()),
success: function(html){
$(".rates-viewer").html(html);
$(".rates-viewer tr.numbers td").css({ opacity: 0 }).fadeTo("slow",1);
}
});
});
My problem is, in Firefox, using the up/down cursor keys to cycle through the dropdown options, doesn't trigger the js onChange()
event. 我的问题是,在Firefox中,使用上/下光标键循环显示下拉选项,不会触发js
onChange()
事件。 It's ok in IE. 它在IE中没问题。
How can I make Firefox see the up/down cursors as an onChange
? 如何让Firefox将上/下游标视为
onChange
? Can I do an either/or on the event, to make either an onChange
or a keypress trigger the same thing? 我可以做一个/或在事件上,使
onChange
或keypress触发同样的事情吗?
Thanks. 谢谢。
You're actually taking advantage of a bug in IE. 你实际上正在利用IE中的一个错误。 Firefox supports onChange correctly, as it's not supposed to fire until the browser loses focus of the select field.
Firefox正确支持onChange,因为它不应该在浏览器失去select字段的焦点之前触发。 (I answered a question yesterday about this very issue, in fact.) It's actually kind of dangerous to use onChange with a select, especially because there's no way for keyboard only users to skip some options.
(事实上,我昨天回答了一个关于这个问题的问题。)使用onChange选择一个实际上有点危险,特别是因为键盘只有用户才能跳过某些选项。 (On top of that, the mouse wheel seems to spin by multiple answers, but it actually fires onChange for each entry it passes by on IE.)
(最重要的是,鼠标滚轮似乎通过多个答案旋转,但实际上它会在IE上传递的每个条目触发onChange。)
If you really want the event to fire whenever someone presses up or down, I would hook into the onKeyPress or onKeyDown events to fire whenever the "up" or "down" key is pressed. 如果你真的想要在有人按下或按下时触发事件,我会挂钩onKeyPress或onKeyDown事件,只要按下“向上”或“向下”键就会触发。
better option is use .on()
to bind function as multiple events 更好的选择是使用
.on()
将函数绑定为多个事件
$("#member").on("change keyup", function(){
-----
});
Maybe instead of using the change() event use the blur() event and check to see if the value changed? 也许不使用change()事件使用blur()事件并检查值是否更改?
FYI, i have not tested this, just an idea that I had. 仅供参考,我没有测试过这个,只是我的想法。 and I am not sure if this is the desired effect because it would trigger on a lost of focus, but I am suggesting it as to keep the effect consistent across different browsers.
我不确定这是否是预期的效果,因为它会引起失去焦点,但我建议它在不同的浏览器中保持效果一致。
var currentValue;
$('.travel-to').blur(function(){
var val = $(this).val();
if (currentValue != val) {
currentValue = val;
$.ajax({
type: "GET",
url: "/inc/rates/rates-viewer.php",
data: "shtech=y&c_name="+escape(currentValue),
success: function(html){
$(".rates-viewer").html(html);
$(".rates-viewer tr.numbers td").css({ opacity: 0 }).fadeTo("slow",1);
}
});
}
});
I've just experienced some weird behavior in firefox which enables the user to open the select dropdown, navigate with the arrows and then instead of tabbing out or clicking on a side the user can click another element which will result into changing the select value without firing change
event. 我刚刚在firefox中经历了一些奇怪的行为,它使用户能够打开选择下拉列表,使用箭头导航,然后用户可以单击另一个元素而不是跳出或单击另一个元素,这将导致更改选择值而不用射击
change
事件。
To work around this you can trigger the change
whenever the keyup
(please also suggest other events?) event is fired and the select has a different value then the previous. 要解决此问题,您可以触发
change
只要keyup
(请同时建议其他事件?)事件被触发并且select具有与之前不同的值。
var selectRegistry = {},
$selects = $('select');
$selects.bind('change', function() {
var $this = $(this);
selectRegistry[$this.attr('id')] = $this.val();
});
$selects.bind('keyup scroll select', function() {
var $this = $(this);
if ($this.val()!=selectRegistry[$this.attr('id')])
{
$this.trigger('change');
}
});
You can use .live()
function if you'll have dinamically created select elements along the runtime of the web page. 如果您将在网页运行时沿着dinamically创建选择元素,则可以使用
.live()
函数。
I got it working using jquery focusout 我使用jquery focusout工作了
http://api.jquery.com/focusout/ http://api.jquery.com/focusout/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.