javascript - 如何防止函数使用旧的函数参数

Question

我正在尝试在单击时传递带有参数的函数，如果我每次都提交模态，它会很好地工作。

但是，如果我取消它，然后再次单击按钮并提交，则该函数被调用两次，参数错误

重现步骤：

• 单击数字 2 -> 取消 -> 单击数字 1 -> 提交 -> 它将记录两个数字而不是一个

如何让它“忘记”以前的参数并仅使用在该函数中传递的参数？

function showModal(body, onSubmit) {
  $("#number-modal").modal("show");
  $("#number-message").html("").html(body);
  $('[data-click="confirm"]').click(function () {
    $(this).off("click");
    onSubmit();
  });
}

function displayNumber(numb) {
  console.log("the number is", numb);
  $("#number-modal").modal("hide");
}

$('[data-number="one"]').click(function () {
  showModal("Hello number one!", function () {
    displayNumber("one");
  });
});

$('[data-number="two"]').click(function () {
  showModal("Hello number two!", function () {
    displayNumber("two");
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-number="one" class="btn btn-primary">Number 1</button>
<button data-number="two" class="btn btn-primary">Number 2</button>

<div class="modal fade"
     id="number-modal"
     tabindex="-1"
     data-backdrop="static"
     data-keyboard="false"
     role="dialog">
    <div class="modal-dialog modal-info" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Number Modal</h4>
            </div>
            <div class="modal-body">
                <div id="number-message"></div>
            </div>
            <div class="modal-footer info-modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" data-click="cancel">Cancel</button>
                <button type="button" class="btn btn-primary" data-click="confirm">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>

标签： javascripthtmljquery

Answer 1

您通常不应该在事件处理程序中添加新的事件处理程序，因为事件处理程序堆栈。

记住旧值并不神奇，每次执行此操作时都会运行越来越多的事件处理程序。所以不要。设置一次事件处理程序。

function showModal(body, target) {
  $('#number-modal').modal('show').data('target', target);
  $('#number-message').html(body);
}
function onSubmit() {
  $('#number-modal').modal('hide');
  alert('You submitted the form to '+ $('#number-modal').data('target'));
}

$(document).on('click', '[data-number="one"]', function () {
  showModal('Hello number one!', 'target 1');
});

$(document).on('click', '[data-number="two"]', function () {
  showModal('Hello number two!', 'target 2');
});

$(document).on('click', '[data-click="confirm"]', onSubmit);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-number="one" class="btn btn-primary">Number 1</button>
<button data-number="two" class="btn btn-primary">Number 2</button>

<div class="modal fade"
     id="number-modal"
     tabindex="-1"
     data-backdrop="static"
     data-keyboard="false"
     role="dialog">
    <div class="modal-dialog modal-info" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Number Modal</h4>
            </div>
            <div class="modal-body">
                <div id="number-message"></div>
            </div>
            <div class="modal-footer info-modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" data-click="cancel">Cancel</button>
                <button type="button" class="btn btn-primary" data-click="confirm">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>