选择元素上的 jQuery 单击事件在 Chrome 54 上无法按预期工作

我有这个代码：

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

如果我单击选择标签中的一个选项，它不会立即显示隐藏的 div。我必须点击它两次才能使其工作。

自己尝试一下：

https://jsfiddle.net/mk425srx/ https://jsfiddle.net/mk425srx/

请注意，您必须单击该选项 2 次才能生效，我希望单击 1 次。必须直接改变。我该如何实现这一目标。 编辑 它在 Firefox 和 chrome 53 中工作正常，显然是 chrome 54 问题。

你应该使用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
});

查看工作小提琴https://jsfiddle.net/mk425srx/2/ https://jsfiddle.net/mk425srx/2/

Update

原因是click事件未按预期进行的原因是，click当元素被触发时事件被触发clicked but change获取值后触发事件changed. So click事件会在值选择更改之前提前触发。这就是为什么click事件不应用于检测值的变化。

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

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

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

小提琴链接：https://jsfiddle.net/mk425srx/3/ https://jsfiddle.net/mk425srx/3/