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

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

Answer 1

＆＃13;

//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');
});

＆＃13;

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

＆＃13;

我认为你真正的问题是，你的div被删除了，而原来的'pan＆＃39; div在不同的地方。一个不在另一个里面。所以你不会得到最接近的。因此，您需要将id保存到隐藏字段或其他内容，或者应将div的引用保存在脚本变量中，就像我在示例中所做的那样。

在模态切换后，Jquery最近不起作用

1 个答案: