Javascript 为什么我的引导工具提示的标题在jQuery中只随keydown事件更改一次？

我有文本输入和文本区域，我想向用户显示他们使用了多少超出限制的字符。因此，我为每个具有数据maxlength属性的元素添加了一个工具提示。我为当前文本输入创建工具提示，每次按下一个键时，该提示包括长度和最大长度值（x/250个字符）。问题在于，在您第一次停止键入后，工具提示的“标题”属性的值永远不会更改。这是给你看的一本书

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>

---

感谢您的时间。

标题仅在第一个关键事件上设置，请尝试以下操作：

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

见：

我同意dreamveivers的意见，因此这将是一个更好的实现：

$（文档）.ready（函数（）{
$（'[data maxlength]'）。每个（函数（）{
var maxText='/'+$（此）.data（'maxlength'）+'使用的字符'；
变量工具提示=$（此）。工具提示({
选择器：“数据切换=“工具提示”，
位置：'底部'，
触发器：“手动”
});
$（this）.on（'keyup'，function（））{
tooltip.attr（'title'，$（this.val（）.length+maxText）
.工具提示（'fixTitle'）
.工具提示（“显示”）；
});
});
});
这似乎可以解决您的问题：

$(document).ready(function(){

    $('[data-maxlength]').each(function(){
        $(this).on('keyup', function(){
            $(this).attr('data-original-title', $(this).val().length + ' / ' + $(this).data('maxlength') + ' characters used.');

            $(this)
              .tooltip({
                selector: 'data-toggle="tooltip"',
                placement: 'bottom'
            })
            .data('placement', 'bottom');

            $(this).tooltip('show');
        });
    });
});


如图所示：
事实上，这是一个有效的问题，已经出现在github问题日志中了&到目前为止，在过去2年多的时间里，还没有任何重大的更新


解决方法：

为
之外的所有文本区域初始化
工具提示
。each（）
，因为不需要通过类选择器
txtarea
循环所有元素。[就性能而言，类选择器的使用远远优于属性选择器]
更新
attr
，它保存
工具提示
的
标题
信息在
keyup
回调中

$（this.attr（'data-original-title'，$（this.val（）.length++'/'++$（this.data（'maxlength'）+'使用的字符）

我注意到，每当我对元素（例如textarea）使用
.tooltip（）
时，当显示工具提示时，总是会附加一个
作为元素的下一个同级元素（例如textarea）。附加的
具有类
工具提示
。在
中有一个元素，该元素具有类
工具提示内部
，其中包含工具提示中显示的消息文本。下面是附加的
示例：

请注意：最好使用
input
事件，而不是
keyup
当您跟踪输入更改时，您可以看到如果您仍然按某个键，工具提示标题不会正确更改。@ZakariaAcharki:这在这里不起作用，因为OP想向用户显示输入字段中输入/删除的每个字符的字符限制，这只有通过
keyup
事件才能实现，因为
change
事件只有在焦点移出当前字段时才会触发。不确定@dreamweiver是什么意思，但确定它会起作用，@ZakariaAcharki:我的错误，兄弟，我误解了
更改的
输入
事件。您的建议是有效的：）这是一个很好的解决方案，但您不认为为同一元素上的每个keyup事件初始化
工具提示将产生性能问题吗？只需更新相应的
attr
，对我来说，保存该标题似乎更合理
<div style="top: 63px; left: 9.5px; display: block;" id="tooltip59349" class="tooltip fade bottom in" role="tooltip">
  <div style="left: 50%;" class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    <span class="n-char">0</span> / 250 characters used.
  </div>
</div>

$(document).ready(function(){
    $('[data-maxlength]').each(function(){
      $(this).tooltip({
        placement: 'bottom',
        trigger: 'focus',
        html: true,
        title: '<span class="n-char">' + $(this).val().length + '</span> / ' + $(this).data('maxlength') + ' characters used.'
      });

      $(this).on('focus keyup', function(){
        $(this).next('.tooltip').find('.tooltip-inner .n-char').text($(this).val().length);
      });
    });
});