javascript - 单击输入字段时会出现“保存”按钮

Question

我希望在输入字段中有一个选择选项，我希望在单击该选项时显示“保存”按钮。这将是一个电子邮件地址表，用户可以在其中从“完全权限”更改为“只读”，一旦他们选择更改设置，他们就可以单独保存。

因此，您单击选择选项 - 保存按钮会淡入 - 一旦您单击保存按钮，按钮就会再次淡出。

  <td>
          <div class="input-group input-group-sm">
            <select class="form-control reveal" show-class="show-save">
              <option <%= "selected" if !rights.include?("View") %>>Read Only</option>
              <option <%= "selected" if rights.include?("View") %>>Full Rights</option>
            </select>
          </div>
        </td>
        <td>
          <button type="submit" id="set_permissions_submit" class="save show-save btn btn-primary btn-sm">Save</button>
        </td>

<script type="text/javascript">

$(function () {
  $('.save').hide();

  $('.reveal').focus(function() {
      $('.save').hide();
      $("."+$(this).attr('show-class')).show();
  });

  $('.submit').blur(function() {
      $('.save').hide();
  });
});
</script>

我从上面的代码中成功实现的是，一旦您单击选择选项并且它被聚焦，就会出现一个保存按钮。但当输入字段未获得焦点时，它就会消失，而不是单击“保存”后。

有人可以帮助解决我无法实现的问题吗？

谢谢，塞兰

Answer 1

它消失了，因为您将其隐藏在此处的 blur 事件中:

$('.submit').blur(function() {
    $('.save').hide();
});

您有一个保存按钮，它同时具有 save 和 show-save 类。

如果你想在点击后隐藏按钮，请这样做:

$('.save').click(function() {
    $('.save').hide();
});