title: keyup event not triggered inside twitter bootstrap modal form
body: <p>I am using Twitter Bootstrap.  </p>
  
  <p>I have created a modal window and it gets called as expected.  </p>
  
  <p>Inside this modal, there is a form:  </p>
  
  <pre><code>&lt;div id="initialSurveyInfo" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modalId" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
          &lt;h3 id="modalId"&gt;Initial Survey Information&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;form class="form-horizontal"&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="surveyTitle"&gt;Survey Title :&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" id="surveyTitle"&gt;
                      &lt;span class="help-inline muted"&gt;&lt;span class="char-limit"&gt;36&lt;/span&gt; character(s) left&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="surveyDesc"&gt;Description:&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;textarea rows="5"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/a&gt;
          &lt;a href="/createSurvey" class="btn btn-primary continue"&gt;Continue&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For the input, the user is restricted to only 36 characters. Beyond 36 characters, I want to disable the "continue" button.<br>
  I have the current character count right next to the input.  </p>
  
  <p>My jQuery code to handle this is:  </p>
  
  <pre><code>$(document).ready(function() {
  
      var calculate = function() {
          var chararcters = $("#surveyTitle").val().length;
  
          var remaining = 36 - characters;
  
          if (remaining &gt;= 0) {
              $(".char-limit").val(remaining);
              if ($(".continue").hasClass("disabled") === true) {
                  $(".continue").removeClass("disabled");
              }
          } else {
              $(".continue").addClass("disabled");
          }
      };
  
      $("#surveyTitle").keyup(calculate);
      $("#surveyTitle").change(calculate);
  });
  </code></pre>
  
  <p>Unfortunately, the keyup() and change() events / methods are not being fired. Thus the remaining character count is not going down and neither is the "Continue" button being disabled when the character count is exceeded.<br>
  I replaced <code>keyup</code> with <code>on('keyup', function)</code> - this does not work either.  </p>
  
  <p>Any idea on how I can respond to the keyup events - the main question would be how to change the "# of characters left" in such a case?  </p>
  
  <p>I am using AngularJS too but I do not think it is affecting anyway (The modal window is in a view template that AngularJS loads based on some previous action)</p>