title: Send AJAX request with jQuery on Click
body: <p>I am trying to send an Ajax request after a link is clicked on my page. My setup is like this: Someone clicks on a link that displays a modal popup. It then asks them to "Confirm" their action by clicking "Yes". If they click "Yes", I send the Ajax request to do the action selected. However, for some reason, my code is not triggering the Ajax code. My code is below:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $('#ajax-remove-completion-date').click(function() {
              $.ajax({
                  type:'POST',
                  url:'post-update.php',
                  cache:false,
                  success: function(response) {
                      $('#success-remove-completion-date').removeClass('hidden');
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;a href="#myModal1" role="button" data-toggle="modal"&gt;&lt;i class="icon-trash"&gt;&lt;/i&gt; Remove Completion Date&lt;/a&gt;
  
  &lt;div id="myModal1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" 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="myModalLabel3"&gt;Remove Completion Date&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;p&gt;Are you sure you want to remove the students Completion Date?&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
          &lt;button class="btn blue" data-dismiss="modal" id="ajax-remove-completion-date"&gt;Yes&lt;/button&gt;
          &lt;input type="hidden" name="submitted" value="remove-completion-date" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>