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

每次点击.edit后，点击处理程序都会附加到#updatePost。因此，将以下两个点击事件分开。

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

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

jQuery单击事件多次

1 个答案: