в то время как bootstrap tooltip active предотвращает запуск события jquery

Question

в то время как bootstrap tooltip active предотвращает запуск события jquery

У меня есть поле ввода, которое отображает подсказку 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 .

Попробуйте написать что-нибудь на входе с помощью и без мыши над полем ввода.

...Есть идеи, как это исправить?

578 1

jQuery twitter-bootstrap jquery-events twitter-bootstrap-tooltip

1 ответ:

Comments

Ничего не найдено.

Gone Coding · Accepted Answer · 2015-11-19 19:55:34

tooltip динамически вставляет элемент после ввода, так что next() не будет соответствовать вашему выходному элементу. Вместо этого используйте nextAll():

Например
$(this).nextAll('.count_message')
CodePen: http://codepen.io/HiTechMagic/pen/NGJJwY

Примечания:

внутри обработчика keyup можно использовать $(this), а не $(document.activeElement).

вместо empty().append() Используйте html() для задания текстового содержимого (use 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');
});