jQuery click events несколько раз

Question

Я знаю, что этот вопрос задан несколько раз, но я не нашел ответа, который работает для меня.

У меня динамический контент загружается через ajax, и я использую bootstrap вместе с кладкой, чтобы каждый пост отображался в кирпичном стиле. Когда пользователь прокручивает страницу, новый пост загружается.

У меня есть выпадающее меню на каждом посту с перечисленными действиями, которые пользователь может выполнять, например, редактировать сообщение. Когда пользователь нажимает ссылку редактирования сообщения, появляется модальная мода, позволяющая редактировать там сообщение.

Когда пользователь нажимает кнопку обновления, первый раз все хорошо. Если пользователь нажимает на другое сообщение для его редактирования и нажимает кнопку обновления, обновляется предыдущая запись и текущая запись. Это происходит в бесконечном состоянии, означая каждый раз, когда он обновит все предыдущие, которые уже были обновлены.

Мой код:

Модальные

$(document.body).on("click", ".editPost", function(){ 

    // Post id to 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 the 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 --> 
<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> 

Динамические почтовые ящики

<!--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"> 
This is the post text This is the post text This is the post text This is the post text 
</div> 
<div class="panel-footer"> 
</div> 

Несколько вещей, я попытался:

$('.editPost').click(function(){ 
    //do stuff // Does nothing!! Don't Work. 
}); 


$(document.body).on("click", ".editPost", function(event){ 
    event.preventDefault(); 
}); 

.unbind(); 
.off(); 
evt.stopPropagation(); 

Наряду с другими методами из другого поста вокруг сети. Ничто не работает. Что мне не хватает?

Answer 1

Каждый раз, когда вы нажимаете на .editPost, обработчик кликов является атташе до #updatePost. Поэтому разделите следующие два события щелчка.

$('body').on("click", ".editPost", function(){ 
    ..... 
}); 

$('#myModal').on('click', '#updatePost', function(){ 
    ... 
});