虽然 bootstrap 工具提示处于活动状态，但会阻止 jquery 事件触发

Question

我得到一个输入字段，在获得焦点时显示 bootstrap 工具提示 。

<input id="nombrecurso" name="nombrecurso"
                        data-original-title="Required field!"
                        data-toggle="tooltip" data-trigger="hover"
                        data-delay='{"show":"200", "hide":"0"}'
                        class="form-control input-lg">
<h6 class="count_message pull-right"></h6>

该字段的剩余字符数显示在 <h6> 附近。此计数器在 jquery keyup 事件时更新。

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});
$(document).on("keyup", '#nombrecurso' ,function() {
  $(this).next('.count_message').empty().append($(document.activeElement).attr('maxlength') + ' characters remaining');
  //event code, is doesn't have to be keyup, it happens with 
  //other events such as click

}

问题是当工具提示处于活动状态时，jquery 事件 keyup 不会触发并且计数器不会更新。

你可以在这里看到问题：codepen。

尝试在输入字段中使用和不使用鼠标在输入字段上写一些东西。

...有什么解决办法吗？

Answer 1

tooltip在输入后动态插入一个元素，这样next()就不会匹配你的输出元素。使用 nextAll() 代替：

例如

$(this).nextAll('.count_message')

CodePen: http://codepen.io/HiTechMagic/pen/NGJJwY

备注：

在 keyup 处理程序中，您可以使用 $(this) 而不是 $(document.activeElement)。
而不是 empty().append() 使用 html() 设置文本内容（使用 empty() & append() 和 DOM 元素以避免重新解析 HTML).

例如

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

$(document).on("keyup", '#nombrecurso', function() {
  var text_length = $(this).val().length;
  var whatareyoucounting = $(this).attr('maxlength');
  var text_remaining = whatareyoucounting - text_length;
  $(this).nextAll('.count_message').html(text_remaining + ' characters remaining');
});

虽然 bootstrap 工具提示处于活动状态，但会阻止 jquery 事件触发

while bootstrap tooltip active prevents jquery event from firing

jquery

twitter-bootstrap

twitter-bootstrap-tooltip

jquery-events

备注：