先前单击的项目被模态删除答案

【问题标题】：Previously clicked items being removed by modal先前单击的项目被模态删除
【发布时间】：2019-08-07 04:13:11
【问题描述】：

我有一个允许我删除 .item 的模式。

单击某个项目后，将出现模式，我可以选择“确认”或“取消”。如果我为多个项目选择取消，然后在一个项目上选择“确认”，则之前单击的每个项目都将被删除。

如何防止这种情况发生？

我曾尝试在模态打开函数中将变量item 设置为null，然后在之后直接重置变量，但没有奏效。

$(function() {

  var modal = $('.modal');

  $(document).on('click', '.item', function() {
    var item = $(this);
    var text = item.text();
    modal.show();
    modal.find('.modal-header').text('Are you sure you want to remove "' + text + '"?');
    $(document).on('click', '.modal-save', function() {
      item.remove();
      modal.hide();
    });
  });

  $(document).on('click', '.modal-close', function() {
    modal.hide();
  });

});

.modal {
  display: none;
  background: rgba(0, 0, 0, 0.5);
}

.item-container {
  background: #eee;
  width: fit-content;
  padding: 10px;
}

.item {
  width: 100px;
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
  margin: 5px 0;
  cursor: pointer;
}

.item:hover {
  background: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-container">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
  <div class="item">four</div>
</div>
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn modal-close">Cancel</button>
        <button type="button" class="btn modal-save">Confirm</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： javascript jquery html modal-dialog

【解决方案1】：

使用 null 初始化并在模式关闭时将其设置为 null。

$(function() {

  var modal = $('.modal');
  var item = null;
  $(document).on('click', '.item', function() {
    item = $(this);
    var text = item.text();
    modal.show();
    modal.find('.modal-header').text('Are you sure you want to remove "' + text + '"?');
    $(document).on('click', '.modal-save', function() {
      item.remove();
      modal.hide();
    });
  });

  $(document).on('click', '.modal-close', function() {
    item = null;
    modal.hide();
  });

});

.modal {
  display: none;
  background: rgba(0, 0, 0, 0.5);
}

.item-container {
  background: #eee;
  width: fit-content;
  padding: 10px;
}

.item {
  width: 100px;
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
  margin: 5px 0;
  cursor: pointer;
}

.item:hover {
  background: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-container">
  <div class="item">one</div>
  <div class="item">two</div>
  <div class="item">three</div>
  <div class="item">four</div>
</div>
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"></h5>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn modal-close">Cancel</button>
        <button type="button" class="btn modal-save">Confirm</button>
      </div>
    </div>
  </div>
</div>

【讨论】：