title: Click event handler occurs multiple times after launching Bootstrap Modal using jQuery and Ajax
body: <p>I have designed a simple modal that works similarly as the JavaScript confirm when the user tries to delete any entity. When user clicks on the 'delete' icon, on the click event of the icon the following modal is launched.</p>
  
  <p><img src="https://i.stack.imgur.com/mb1Bs.png" alt="enter image description here"></p>
  
  <p>If the user click 'Yes', an ajax request is sent to delete the item. It works perfectly when the first ajax request is sent. But when the user tries to perform the same operation again it sends two requests and so on for the next attempts. I can not figure out what is going wrong.</p>
  
  <p>Here is my HTML for the 'delete icon':</p>
  
  <pre><code>&lt;a href="javascript:void(0)" class="btn btn-default"&gt;
  &lt;?php echo $item_name . " "; ?&gt;
  &lt;i class="fa fa-times delete_item" data-url="&lt;?php echo $url; ?&gt;" data-item_id="&lt;?php echo $item['id']; ?&gt;" &gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>for the modal:</p>
  
  <pre><code>&lt;div class="modal fade"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-body"&gt;
              &lt;h5 style="text-align:center;"&gt;Do you want to delete this item?&lt;/h5&gt;
              &lt;br /&gt;
              &lt;div&gt;
                  &lt;button type="button" class="btn btn-danger pull-right confirm_delete"&gt;Yes&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default pull-right" data-dismiss="modal"&gt;No&lt;/button&gt;
              &lt;/div&gt;
              &lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is my JavaScript: </p>
  
  <pre><code>$('body').on('click', '.delete_item', function(e){
  e.preventDefault();
  var url = $(this).data('url');
  var data = 'item_id=' + $(this).data('item_id');
  var btn = $(this);
  
  $(btn).parents('form').children('.modal').modal('show');
  
  $('.modal-body').on('click', '.confirm_delete', function(e){
      e.preventDefault();
      var confirm = $(this);
      $.ajax({
          type: 'post',
          url: url,
          data: data,
          dataType: 'json',
          cache: false,
          success: function(data){
              if(data.status)
              {
                  $(btn).parent('.btn').remove();
              }
              else
              {
                  alert('error');
              }
          },
          complete: function(){
              $(confirm).parents('.modal').modal('hide');
          }
      });
  });
  </code></pre>
  
  <p>});</p>