选择元素上的jQuery点击事件无法在Chrome 54上按需使用 [英] jQuery click event on Select element not working as desired on Chrome 54
问题描述
HTML
< select class =form-controlname =footerLayout>
< option value =>
< / option>
< option value =1>
1栏
< / option>
< option value =2>
2栏
< / option>
< / select>
< div class =column column-1>
< h3>内容< / h3>
< / div>
< div class =column column-2>
< h3> Content2< / h3>
< / div>
CSS
.column-1 {
display：none;
}
.column-2 {
display：none;
Jquery
<$ p $（p> $（'[name = footerLayout]'）。click（function（）{
var selector =.column-+ $（this）.val（）; //创建选择器
$（。column）。not（selector）.hide（）; //隐藏其他
$（selector）.show（）; //根据所选值显示列
}）;
如果我点击select标签中的选项，它不会马上显示隐藏的div。我必须点击它两次才能正常工作。
自己尝试一下：
< a href =https://jsfiddle.net/mk425srx/ =nofollow> https://jsfiddle.net/mk425srx/
注意你必须点击选项2次才能工作，我希望这是1次。它必须直接改变。我如何做到这一点。
编辑
它在firefox和chrome 53中的工作很好，显然它是一个chrome 54的问题..
您应该使用更改事件而不是点击
只需改变你的JS中的事件。更新后的代码看起来像
$（'[name = footerLayout]'）。change（function（）{
var selector =.column-+ $（this）.val（）; //创建选择器
$（。column）。not（selector）.hide（）; //隐藏其他
$（selector）.show（）; //根据所选值显示列
}）;
查看工作小提琴 https://jsfiddle.net/mk425srx/2/
更新
点击当元素被点击时触发事件，但改变事件在get 值改变后触发。因此，点击事件会在更改值之前触发。这就是为什么点击事件不应该被用来检测值的变化。
为了清楚这一点，试试下面的代码来看看事实。
$（'[name = footerLayout]'）。change（function（）{
console.log（$（this）.val（））;
}）;
$ b $（'[name = footerLayout]'）。click（function（）{
console.log（'clicked'）;
}）;
小提琴链接： https://jsfiddle.net/mk425srx/3/
I have this code:
HTML
<select class="form-control" name="footerLayout">
<option value="">
</option>
<option value="1">
1 column
</option>
<option value="2">
2 column
</option>
</select>
<div class="column column-1">
<h3>Content</h3>
<textarea class="form-control" type="text" name="footerContent"></textarea>
</div>
<div class="column column-2">
<h3>Content2</h3>
<textarea class="form-control" type="text" name="footerContent"></textarea>
</div>
CSS
.column-1 {
display: none;
}
.column-2 {
display: none;
}
Jquery
$('[name=footerLayout]').click(function() {
var selector = ".column-" + $(this).val(); //Create selector
$(".column").not(selector).hide(); //Hide others
$(selector).show(); //Show column based on selected value
});
If i click on an option from the select tag it doesn't show the hidden div right away. I would have to click it 2 times in order for it to work.
try it yourself:
https://jsfiddle.net/mk425srx/
Notice you must click the option 2 times for it to work, I want this to be 1 time. It has to change directly. How do i achieve this. EDIT Its working fine in firefox and chrome 53 apparently its a chrome 54 issue..
You should use change event instead of click
Just change the event in your JS. The updated code looks like
$('[name=footerLayout]').change(function() {
var selector = ".column-" + $(this).val(); //Create selector
$(".column").not(selector).hide(); //Hide others
$(selector).show(); //Show column based on selected value
});
See the working fiddle https://jsfiddle.net/mk425srx/2/
Update
The reason of click event not working as expected is because of, click event get fired when the element is clicked but change event is fired after the value get changed. So click event is fired earlier and before the value selection is changed. That's why click event shouldn't be used to detect change of value.
To be clear about this, try the following code to see the fact.
$('[name=footerLayout]').change(function() {
console.log($(this).val());
});
$('[name=footerLayout]').click(function() {
console.log('clicked');
});
Fiddle link: https://jsfiddle.net/mk425srx/3/
这篇关于选择元素上的jQuery点击事件无法在Chrome 54上按需使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
