Javascript 在Chrome 54上，选择元素的jQuery click事件未按所需工作

我有以下代码：

HTML

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
    });

如果我单击select标记中的一个选项，它不会立即显示隐藏的div。我将不得不点击它2次，以使其工作

你自己试试吧：

请注意，您必须单击该选项2次，它才能工作，我希望这是1次。它必须直接改变。我如何做到这一点。 编辑

---

它在firefox和Chrome53中工作正常，这显然是Chrome54的问题。

你应该使用

change

事件，而不是

click

只需更改JS中的事件。更新后的代码如下所示

$('[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
});

看到小提琴了吗

更新

click

事件未按预期工作的原因是，单击元素时触发了

click

事件，但值更改后触发了

change

事件。因此，

click

事件在值选择更改之前提前触发。这就是为什么不应使用

单击
事件来检测值的变化

为了弄清楚这一点，请尝试以下代码以了解事实

$('[name=footerLayout]').change(function() {
  console.log($(this).val());
});

$('[name=footerLayout]').click(function() {
  console.log('clicked');
});

Fiddle link:
很好，在这里它对我很好。可能是哪个浏览器的副本@Morpheusit很好，我正在使用firefox 49。这很好，但我仍然很好奇是什么导致了这个问题，谢谢！
$('[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
});

$('[name=footerLayout]').change(function() {
  console.log($(this).val());
});

$('[name=footerLayout]').click(function() {
  console.log('clicked');
});