keyup событие не активировано внутри twitter bootstrap модальная форма

Question

Я использую Twitter Bootstrap.

Я создал модальное окно, и оно называется как ожидается.

Внутри этого модальных, есть форма:

<div id="initialSurveyInfo" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalId" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="modalId">Initial Survey Information</h3> 
    </div> 
    <div class="modal-body"> 
     <form class="form-horizontal"> 
      <div class="control-group"> 
       <label class="control-label" for="surveyTitle">Survey Title :</label> 
       <div class="controls"> 
        <input type="text" id="surveyTitle"> 
        <span class="help-inline muted"><span class="char-limit">36</span> character(s) left</span> 
       </div> 
      </div> 
      <div class="control-group"> 
       <label class="control-label" for="surveyDesc">Description:</label> 
       <div class="controls"> 
        <textarea rows="5"></textarea> 
       </div> 
      </div> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a> 
     <a href="/createSurvey" class="btn btn-primary continue">Continue</a> 
    </div> 
</div> 

Для ввода, пользователь ограничивается только 36 символов. Помимо 36 символов, я хочу отключить кнопку «продолжить».
У меня есть текущий счетчик символов рядом с входом.

Мой JQuery код для обработки этого:

$(document).ready(function() { 

    var calculate = function() { 
     var chararcters = $("#surveyTitle").val().length; 

     var remaining = 36 - characters; 

     if (remaining >= 0) { 
      $(".char-limit").val(remaining); 
      if ($(".continue").hasClass("disabled") === true) { 
       $(".continue").removeClass("disabled"); 
      } 
     } else { 
      $(".continue").addClass("disabled"); 
     } 
    }; 

    $("#surveyTitle").keyup(calculate); 
    $("#surveyTitle").change(calculate); 
}); 

К сожалению, KeyUp() и изменение() события/методы не увольняют. Таким образом, оставшееся количество символов не уменьшается, и ни одна кнопка «Продолжить» не отключается, когда количество символов превышено.
Я заменил keyup на on('keyup', function) - это тоже не сработает.

Любая идея о том, как я могу реагировать на события с клавиатурой - главный вопрос заключается в том, как изменить «# символов слева» в таком случае?

Я использую AngularJS тоже, но я не думаю, что это влияет в любом случае (модальное окно в шаблоне вида, что AngularJS нагрузки на основе некоторых предыдущих действий)

Answer 1

Наконец-то нашли решение. Решение sasi является частично правильным.

В принципе, этот вопрос обсуждается здесь: https://github.com/twitter/bootstrap/issues/2380

Решение заключается в следующем:
Заменить

$("#surveyTitle").keyup(calculate); 

с

$("body").on('keyup', "#surveyTitle", calculate); 

Answer 2

on('keyup','#surveyTitle', function) { 

} 


$("body").on('keyup', "#surveyTitle", calculate); 

вы пробовали, как это .. ?