jQuery 多次点击事件

Question

我知道这个问题已经被问过好几次了，但我还没有找到适合我的答案。

我有通过 ajax 加载的动态内容，我正在使用 bootstrap 和砖石结构以允许每个 post 以砖块样式显示。当用户滚动页面时，新的 post 被加载。

我在每个 post 上都有一个下拉列表，其中列出了用户可以执行的操作，例如编辑 post。当用户单击编辑 post link 时，会弹出一个模式，允许他们在那里编辑 post。

当用户第一次点击更新按钮时一切正常。如果用户单击另一个 post 对其进行编辑并单击更新按钮，则先前的 post 和当前的 post 都会更新。这发生在无限状态下，这意味着每次它都会更新所有之前已经更新的状态。

我的代码：

模态

$(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框

<!--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();

以及网络上其他 post 的其他方法。似乎没有任何效果。我错过了什么？

Answer 1

每次点击 .edit Post 时，点击处理程序都会附加到 #updatePost。所以把下面两个点击事件分开。

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

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

jQuery 多次点击事件

jQuery click events multiple times

jquery

click

twitter-bootstrap