title: jQuery change() doesn't work for the first onclick event but works for the next successive clicks
body: <p>I have a button as following:</p>
  
  <pre><code>&lt;li class="cnt-li"&gt;
    &lt;button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal"&gt;
      &lt;img src="images/add.png" alt="Add Container"&gt;
    &lt;/button&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>I have a long modal div as following:</p>
  
  <pre><code>&lt;div class="modal fade add-ctn-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-backdrop="false"&gt;
    &lt;div class="modal-dialog modal-sm"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
          &lt;h4 class="modal-title" id="myModalLabel"&gt;Add Container&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="ctn-num" class="control-label"&gt;Container Number:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="ctn-num"&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-primary" id="add_btn_modal" data-dismiss="modal"&gt;Add&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So when I click on the button, the above modal opens up, which has an input box and an add button. When I enter some number like say "5" and click on add, the text in the div mentioned below needs to be changed to the entered value which is 5 in this case.[By default, the value is 0]. But it doesn't change. </p>
  
  <p>This is the div:</p>
  
  <pre><code>&lt;div&gt;
    &lt;label id="ctn-info-label"&gt;Container Number : &lt;span class="container-no"&gt;0&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I wrote the following script to achieve this:</p>
  
  <pre><code>$(document).ready(function(){
    $('#add_btn_modal').click(function(e){
        e.preventDefault(); 
        $('#ctn-num').change(function(){
          $('.container-no').text($(this).val());
        })
    });
  });
  </code></pre>
  
  <p>This script is working but from the second click onwards. 
  First time: I enter the number and click on Add. It doesn't change.
  Second time: I change the value and click on Add. The value changes and for further clicks. 
  Once I reload the page and try it again, it won't work for the first time. </p>
  
  <p>Am I missing something here in the script? Could anyone help me with this.</p>