title: Ajax event executing multiple times - weird behaviour
body: <p>This is my code:</p>
  
  <pre><code>$( document ).ready(function() {
     $('#myModal1').on('shown.bs.modal', function (event) {
         $(".save_profile_name").click(function(){
            var pro_id          = $("#profile_id").val();
            var pro_name        = $("#profile_name").val();
            var pro_description = $("#profile_description").val();
            if (pro_id != ""){  
                 $.ajax({
                      type: "POST",
                      url: "myURL",
                      data: { 
                              pro_id: pro_id,
                              pro_name: pro_name,
                              pro_description: pro_description
                            }
                 }).done(function( json ) {
                    $('#myModal1').modal('hide');
                 });
             }else{ 
                 $.ajax({
                      type: "POST",
                      url: "myURL",
                      data: { 
                              pro_id: pro_id,
                              pro_name: pro_name,
                              pro_description: pro_description
                            }
                 }) .done(function( event ) {
                      $('#myModal1').modal('hide');
                 });
             }
         });
     });
  </code></pre>
  
  <p>I have an modal from boostrap with a form, which do an insert or an update in db. It works fine, BUT my problem is when I add a new item in db through ajax, after that when I want to add another item, somehow it inserts in db the same <strong>item</strong> two times, after that I add another item, it inserts in db the same <strong>item</strong> 3 times, ... 4 times .... and the cycle repeats. But If I  refreshed the page after the ajax event, it works fine. Can someone help with this ?</p>