正在缓存将变量传递给嵌套函数

Question

我正在尝试将一个删除ID传递给一个bootstrap模式，该模式在确认时使用该id调用delete元素函数。一切都是第一次工作，但出于某种原因，当我尝试第二次，第三次等时，它总是尝试传递最初触发的元素的位置id，这可能不再存在。

如果我在调用bootstrap模式之前移动removeElement(deleteID)函数调用一切正常 - 但是没有用户确认 - 只有当尝试在引导模式中添加此删除函数调用时，ID才会显示存储。如何确保每次都可以在bootstrap模式函数中访问新ID？

document.addEventListener("click", removeLocationListener);
function removeLocationListener(e) {
    var element = e.target;
    if (element.tagName == 'A' && element.classList.contains("delete-location")) {
        var deleteID = element.getAttribute("data-location-id")
        e.preventDefault();

        $('#removeLocation').modal('show')
        $("#removeLocation").on("click", ".btn-danger", function () {
            removeElement(deleteID)
            $('#removeLocation').modal('hide')
        });

    }
}
function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}

Answer 1

如@Chris G所述，原因很清楚。

现在的问题是如何解决这个问题。

第一个和快速模式是更改此行：

$("#removeLocation").on("click", ".btn-danger", function () {

至：

$("#removeLocation").one("click", ".btn-danger", function () {

欲了解更多信息，请参阅.one()

另一种方式可以基于数据属性。在显示模态之前，您可以将deleteID数据属性设置为removeLocation，然后您可以读取它：

document.addEventListener("click", removeLocationListener);
function removeLocationListener(e) {
    var element = e.target;
    if (element.tagName == 'A' && element.classList.contains("delete-location")) {
        var deleteID = element.getAttribute("data-location-id")
        e.preventDefault();

        $("#removeLocation").data('deleteID', deleteID); // save deleteID
        $('#removeLocation').modal('show');
    }
}
$("#removeLocation").on("click", ".btn-danger", function (e) {
    var deleteID = $("#removeLocation").data('deleteID');  // read deleteID
    removeElement(deleteID)
    $('#removeLocation').modal('hide')
});
function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}

Answer 2

鉴于Vanilla JS和jQuery的混合，我稍微清理了一下代码：

var $nodeToDelete = null;

$("#removeLocation").on("click", ".btn-danger", function() {
  if ($nodeToDelete) $nodeToDelete.remove();
  $nodeToDelete = null;
  $('#removeLocation').modal('hide');
});

$(document).on("click", "a.delete-location", function(e) {
  e.preventDefault();
  var id = $(this).data("location-id");
  $nodeToDelete = $("#" + id);
  $('#removeLocation .modal-title span').text(id);
  $('#removeLocation').modal('show');
});

a.delete-location {
  color: red
}

<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div id="removeLocation" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Remove Location <span></span>?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger">Remove</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<p id="123">Location 123 <a class="delete-location" href="#" data-location-id="123">X</a></p>
<p id="456">Location 456 <a class="delete-location" href="#" data-location-id="456">X</a></p>

我主要合并了删除点击处理程序和removeLocation，并在整个过程中使用了jQuery。