javascript - 为什么我的 Bootstrap 工具提示的标题只随着 jQuery 中的 keydown 事件改变一次？

Question

我有文本输入和文本区域，我想向用户显示他们使用了超出限制的字符数。因此，我向每个具有 data-maxlength 属性的元素添加了一个工具提示。我为当前文本输入创建工具提示，其中包括每次按下按键时的长度和最大长度值(x/250 个字符)。问题是，在您第一次停止输入后，工具提示的标题属性的值永远不会改变。这是jsFiddle向您展示。

jQuery

$(document).ready(function(){
    $('[data-maxlength]').each(function(){
        $(this).on('keyup', function(){
            $(this).tooltip({
                selector: 'data-toggle="tooltip"',
                placement: 'bottom',
                trigger: 'manual',
                title: $(this).val().length + ' / ' + $(this).data('maxlength') + ' characters used.'
            });
            $(this).tooltip('show');
        });
    });
});

HTML:

<textarea name="description" data-maxlength="250"></textarea>

感谢您的宝贵时间。

Answer 1

标题仅在第一个关键事件上设置，试试这个:

title: function() {return $('[data-maxlength]').val().length + ' / ' + $(this).data('maxlength') + ' characters used.';}

参见:How do JavaScript closures work?

我同意 dreamveivers 的评论，所以这将是一个更好的实现:

$(document).ready(function(){
    $('[data-maxlength]').each(function(){
      var maxText = ' / ' + $(this).data('maxlength') + ' characters used.';
      var tooltip = $(this).tooltip({
            selector: 'data-toggle="tooltip"',
            placement: 'bottom',
            trigger: 'manual'
      });
      $(this).on('keyup', function(){
          tooltip.attr('title', $(this).val().length + maxText)
              .tooltip('fixTitle')
              .tooltip('show');
      });
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<textarea name="description" data-maxlength="250"></textarea>

参见:Change Twitter Bootstrap Tooltip content on click