为什么ajax请求加倍？

Question

I have an issue, with ajax request. When button enter is clecked it is doubles ajax request. I spent 4 hours dealing with it and no effect at all. Can someone help me with it. I have created consol.log here. For better understanding of my bad code. Thank you in advanced!

let formSubmitHandler = (data) => {
  console.log(data)
  // $.ajax({ url: 'index.php',
}
let handleInputEdit = (data) => {
  let onFocusHandler = (element) => {
    element.keypress(function( event ) {
      if ( event.which == 13) {
        let inputData = element.val();
        let name = element.attr('name');
        return onHandlerFormData(name, inputData);
      }
    })
  }
  let onHandlerFormData = (name, data) => {
    let str = `${name}=${data}`;
    $('#data').html(str)
    return formSubmitHandler(str);
  }
  let onEditHandler = () => {
    let checkboxes = document.querySelectorAll('input[type=checkbox]');
    for (let i = 0; i < checkboxes.length; i++) {
      const element = checkboxes[i];
      let getNaighborInput = $(element).parent().next();
      getNaighborInput.attr("disabled", true);
      if (element.checked) {
        let getNaighborInput = $(element).parent().next();
        getNaighborInput.attr("disabled", false)
          .focus(function(){
            onFocusHandler($(this));
          })
      }
    }
  };
  onEditHandler();
  $("input[type=checkbox]").on("click", onEditHandler);
}
handleInputEdit();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="mainForm">
  <label for="companyName">Label 2</label>
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox">
    </span>
    <input 
        id="companyName"
        type="text" 
        class="form-control"
        aria-label="..." 
        name="companyName"
        >
  </div>
  <label for="edrpou">Label 2</label>
  <div class="input-group">
    <span class="input-group-addon">
      <input type="checkbox">
    </span>
    <input 
      id="edrpou"
      type="text" 
      class="form-control"
      aria-label="..." 
      name="edrpou"
      >
  </div>
</form>

</div>

Answer 1

You are calling onFocusHandler multiple times. You binding the onFocusHandler multiple times each time the checkbox is clicked. Moving the onFocusHandler from the definition of onEditHandler will solve this issue. Try out the following code, The onEditHandler will change as follows,

let onEditHandler = () => {
    let checkboxes = document.querySelectorAll('input[type=checkbox]');
    for (let i = 0; i < checkboxes.length; i++) {
        const element = checkboxes[i];
        let getNaighborInput = $(element).parent().next();
        getNaighborInput.attr("disabled", true);
        if (element.checked) {
            let getNaighborInput = $(element).parent().next();
            getNaighborInput.attr("disabled", false)

        }
    }
};

And bind the onFocusHandler function with the checkboxes only once as follows,

$('input[type=checkbox]').each(function () {
    onFocusHandler($(this).parent().next());
});