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

【问题标题】：Passing a variable to a nested function is being cached正在缓存将变量传递给嵌套函数
【发布时间】：2019-02-15 03:18:09
【问题描述】：

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

如果我在调用引导模式之前移动 removeElement(deleteID) 函数调用，每次一切正常 - 但是没有用户确认 - 只有在尝试在引导模式中添加此删除函数调用时，ID 才会出现得到存储。如何确保每次都可以在引导模式函数中访问新 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);
}

【问题讨论】：

您的$("#removeLocation").on("click" ... 不断添加事件侦听器，因此当您单击第二个删除链接时，removeElement 函数会运行两次。

标签： javascript jquery twitter-bootstrap bootstrap-4 bootstrap-modal

【解决方案1】：

考虑到 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。

【讨论】：

【解决方案2】：

正如@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);
}

【讨论】：