twitter bootstrap - jQuery click events multiple times -

i know question has been asked several time haven't found answer works me.

i have dynamic content being loaded via ajax , using bootstrap along masonry allow each post displayed in brick style. user scrolls page new post loaded.

i have dropdown on each post listed actions user can perform such edit post. when user clicks edit post link modal poped allowing them edit there post.

when user clicks update button first time well. if user clicks post edit , clicks update button both previous post , current post updated. happens in infinite state meaning each time update previous 1 updated.

my code:

modal

$(document.body).on("click", ".editpost", function(){    // post id update   var post_id = $(this).closest('.panel').attr('id');    // set modal title   $('#mymodallabel').html('edit post');    // post text   var panel_body = $('#'+post_id).children('.panel-body');    $('.modal-body').html('<form><textarea id="newposttext" class="form-control" rows="3">'+panel_body.text()+'</textarea></form>');    $('#updatepost').click( function(){      var update_text = $('textarea#newposttext').val();     console.log(update_text);      // delete post     var datastring = {       csrf_test_name : csfr_token_value,       'post_id': post_id     };      $.ajax({         type: "post",         url: 'someurl/someplace',         data: datastring,         async:true,         cache: false,         success: function(html){              $('#'+post_id).children('.panel-body').html(update_text);              var $container = $('.masonry').masonry();              $container.masonry();          },         complete: function(){            console.log('update');          }     });    });  }); 

modal

<!-- modal --> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">   <div class="modal-dialog">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>         <h4 class="modal-title" id="mymodallabel">modal title</h4>       </div>       <div class="modal-body">               </div>       <div class="modal-footer">         <button id="cancelupdate" type="button" class="btn btn-default" data-dismiss="modal">cancel</button>         <button id="updatepost" type="button" class="btn btn-primary" data-dismiss="modal">update</button>       </div>     </div>   </div> </div> 

dynamic post boxes

<!--post--> <div id="344" class="panel panel-default">  <div class="dashboard-heading">   <div class="media">   <img class="pull-left media-object" alt="..." src="/static/users/13c45d8d-c99d-49d6-a2a1-85b7f031ea86/thumbnail/1426115733cada320d3089219c7cc8c825b23c8714.jpeg">    <h3 class="panel-title"> user - 5 hours ago</h3>   </div>   <div class="dropdown pull-right" style="left: 10px;position: relative;top: -50px;width: 20px;">   <a href="#" data-toggle="dropdown">   <span class="caret"></span>   </a>   <ul class="dropdown-menu" aria-labelledby="dlabel" role="menu">    <li role="presentation">     <a class="editpost" data-target="#mymodal" data-toggle="modal" tabindex="-1" role="menuitem">      <span class="glyphicon glyphicon-pencil"></span>edit     </a>    </li>    <li role="presentation"></li>    <li role="presentation"></li>    <li class="divider" role="presentation"></li>    <li role="presentation">   </ul>  </div> </div> <div class="panel-body">  post text post text post text post text </div> <div class="panel-footer"> </div> 

a few things have tried:

$('.editpost').click(function(){   //do stuff // nothing!! don't work.  });   $(document.body).on("click", ".editpost", function(event){   event.preventdefault(); });  .unbind(); .off(); evt.stoppropagation(); 

along other methods other post around web. nothing seems work. missing?

every time click on .editpost click handler attache #updatepost. separate following 2 click events.

$('body').on("click", ".editpost", function(){     ..... });  $('#mymodal').on('click', '#updatepost', function(){   ... });