如何只加载一次带有焦点事件的json

Question

我有focus 的基本活动如下：

(document).on("focus", '#checkin,#checkout', function() {
  $.getJSON('data.json', function(data) {
    //load here...
  });
});

我想加载我的 json 数据，实际上当我专注于我的输入时，代码会按预期工作。json 数据已经加载，但如果我专注于我的输入两次，我会看到结果..

我如何加载我的 json 数据当我集中输入一次时？

Plunker Demo With Full Project

Answer 1

获取json数据时可以使用此代码：

  $.getJSON('data.json', function(data) {
     element.find('#checkin').focus();
     element.find('#checkout').focus();
  });

Answer 2

您可以使用布尔标志来测试事件是否已被触发：

var focused = false;
$(document).on("focus", '#checkin,#checkout', function() {
  if (!focused) {
    console.log('focused!!');
    focused = true;
  }
});

演示：

var focused = false;
$(document).on("focus", '#checkin,#checkout', function() {
  if (!focused) {
    console.log('focused!!');
    focused = true;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkin" />

<input id="checkout" />

或者，您可以使用jQuery .off() 方法删除事件处理程序或使用.one() method 仅绑定一次。