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事件键盘不会启动，并且计数器不会更新。

您可以在此处查看问题：codepen。

尝试在输入字段中使用和不使用鼠标在输入中写入内容。

...有任何想法如何解决这个问题？

Answer 1

tooltip在输入后动态插入一个元素，因此next()将与您的输出元素不匹配。请改用nextAll()：

e.g。

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

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

注释：

在keyup处理程序中，您可以使用$(this)而不是$(document.activeElement)。
而不是empty().append()使用html()设置文字内容（使用empty()＆amp; append()与DOM元素一起使用，以避免重新解析HTML。）

e.g。

$(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 tooltip active会阻止jquery事件触发

1 个答案:

注释：