Jquery最近不工作莫代尔之后切换

Question

我想用json删除任何数据。我使用bootsrap modal来接受删除。当接受删除jquery最接近不工作。如何解决它。

 $('body').on('click', '.remove-button', function (event) { 
 
      $('#modal').modal(); 
 
      return false; 
 
     }); 
 
     $('body').on('click', '.remove', function (e) { 
 
      $(this).closest(".pan").toggle(1000, function() { 
 
       $(this).closest(".pan").remove(); // Not work 
 
      }); 
 
      $('#modal').modal('toggle'); 
 
     });

.pan HTML

@foreach (var item in Model) 
 
{ 
 
    <div class="panel panel-default pan"> 
 
     <div class="panel-heading text-capitalize text-weight-bold text-primary">@Html.Action("SenderName", "Messages", new { @Id = item.Sender }) - @item.Message.Date.ToMinifiedDate()</div> 
 
     <div class="panel-body"> 
 
      @item.Message.Text 
 
     </div> 
 
     <div class="panel-footer"> 
 
      <div class="btn-group-xs text-center"> 
 
       @if (item.Status == MessageTypes.İletildi) 
 
       { 
 
        <a class="btn btn-primary viewed"><i class="fa fa-eye"></i> Görüldü </a> 
 
       } 
 
       <a href="@Url.Action("SendMessage","Messages",new { @Id=item.Sender })" class="btn btn-default reply"><i class="fa fa-mail-forward"></i> Yanıtla</a> 
 
       <a class="btn btn-default ban"><i class="fa fa-ban"></i> Şikayet</a> 
 
       <a data-id="@item.Id" class="btn btn-default remove-button"><i class="fa fa-remove"></i> Sil</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
}

HTML模式

<div id="modal" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
     <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">Mesaj Sil</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p class="text-capitalize">Mesaj <b class="text-primary">Silinecek</b> Onaylıyor Musunuz?</p> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default btn-flat" data-dismiss="modal"><i class="fa fa-remove"></i> İptal</button> 
 
       <button id="removeButton" type="button" class="btn btn-primary btn-flat remove"><i class="fa fa-check"></i> Evet Onayla</button> 
 
      </div> 
 
     </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->

模态正在工作和模态切换正在工作。但最近没有工作

Answer 1

//Variable to hold the div tobe deleted 
 
var DivToClose = null; 
 
$('body').on('click', '.remove-button', function(event) { 
 
    DivToClose = $(this).closest(".pan"); // assigning the div to this variable so as to delete it on confirmation. 
 
    $('#modal').dialog(); 
 
    return false; 
 
}); 
 
$('body').on('click', '.remove', function(e) { 
 
    DivToClose.toggle(1000, function() { 
 
    DivToClose.remove(); // Not work 
 
    }); 
 
    $('#modal').dialog('close'); 
 
}); 
 
$('body').on('click', '.cancel', function(e) { 
 
    //remove the div reference, in case of cancel 
 
    DivToClose = null; 
 
    $('#modal').dialog('close'); 
 
});

<link href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> 
 
<div class="panel panel-default pan"> 
 
    <div class="panel-heading text-capitalize text-weight-bold text-primary">Pan A</div> 
 
    <div class="panel-body"> 
 
    XXXXX 
 
    </div> 
 
    <div class="panel-footer"> 
 
    <div class="btn-group-xs text-center"> 
 
     <a href="" class="btn btn-default reply"><i class="fa fa-mail-forward"></i> Yanıtla</a> 
 
     <a class="btn btn-default ban"><i class="fa fa-ban"></i> Şikayet</a> 
 
     <a data-id="@item.Id" class="btn btn-default remove-button"><i class="fa fa-remove"></i> Remove</a> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br /> 
 
<div class="panel panel-default pan"> 
 
    <div class="panel-heading text-capitalize text-weight-bold text-primary">Pan B</div> 
 
    <div class="panel-body"> 
 
    XXXXX 
 
    </div> 
 
    <div class="panel-footer"> 
 
    <div class="btn-group-xs text-center"> 
 
     <a href="" class="btn btn-default reply"><i class="fa fa-mail-forward"></i> Yanıtla</a> 
 
     <a class="btn btn-default ban"><i class="fa fa-ban"></i> Şikayet</a> 
 
     <a data-id="@item.Id" class="btn btn-default remove-button"><i class="fa fa-remove"></i> Remove</a> 
 
    </div> 
 
    </div> 
 
</div> 
 

 

 
<div id="modal" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <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">Mesaj Sil</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p class="text-capitalize">Mesaj <b class="text-primary">Silinecek</b> Onaylıyor Musunuz?</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default btn-flat cancel" data-dismiss="modal"><i class="fa fa-remove"></i> Cancel</button> 
 
     <button id="removeButton" type="button" class="btn btn-primary btn-flat remove"><i class="fa fa-check"></i> Remove </button> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 
<!-- /.modal -->

我认为你真正的问题是，你的div被删除，原来的“锅” DIV是在不同的地方。一个不在另一个里面。所以你不会得到最接近的。 因此，您需要将ID保存到隐藏的字段或其他内容，或者应该像div中那样将div的引用保留在脚本变量中。