Jquery Closestモーダルトグル後に機能しません

Question

jsonでデータを削除します。私は削除を受け入れるためにbootsrapモーダルを使用します。受け入れるときに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 -->

モーダルが機能し、モーダルトグルが機能しています。しかし、最も近いあなたのdiv要素を削除すると、元の「パン」のdivが異なる場所にある、

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 -->

は、私はあなたの本当の問題だと思います動作していません。 1つは別のものの中にいません。だからあなたは一番近いものを手に入れません。 idを隠しフィールドなどに保存する必要があります。また、この例のようにdivの参照をスクリプト変数に保持する必要があります。