jquery - 只为集合中的所有项目触发一次点击

Question

我有一个包含许多字段的表单，我需要点击它们中的任何一个来触发一个模式。
这应该在整个表单中只发生一次，与单击哪个字段无关。

假设每个字段都由 CSS 类 .form-control 标识，我尝试使用 jQuery .one()方法，以这种方式:

$('.form-control').one('click',function(){
   $('#modal').modal();
});

这几乎可以正确运行，因为它肯定只会在我第一次单击每个字段时打开模态，但是如果我单击另一个字段，它会再次打开模态，这不是需要的。

这里有 working example举一个简单的例子，为了简单起见，我打开了一个警报而不是模态。如果您单击第一个字段，则会打开警报，然后单击同一字段(正确)什么也不做，但单击第二个字段再次触发它，这不是我需要的。

请问，如何限制模态打开只能先点击任何字段？

Answer 1

您可以使用 jQuery off 删除事件处理程序方法，例如

$(function() {
  $('.form-control').on('click', function() {
    console.log('ok');
    $('.form-control').off('click');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input class="form-control">
  <input class="form-control">
</form>