为什么ajax请求加倍？

Question

我有一个关于 ajax 请求的问题。当按钮输入被选中时，它是双倍的 ajax 请求。我花了 4 个小时处理它，但完全没有效果。有人可以帮我吗。我在这里创建了 consol.log。为了更好地理解我的错误代码。提前谢谢你！

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>

Answer 1

您多次致电onFocusHandler。每次单击复选框时，您都会多次绑定onFocusHandler。从onEditHandler 的定义中移动onFocusHandler 将解决此问题。试试下面的代码， onEditHandler 会发生如下变化，

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)

        }
    }
};

并将onFocusHandler函数与复选框绑定一次，如下所示，

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

Answer 2

我已经重新编写了 javascript 来处理启用/禁用文本框，并处理 ENTER 按下的 keyup 事件。

我认为这样的代码更具可读性，另外：它可以按预期工作。

// disable all textboxes by default
$('input[type=text]').attr('disabled','disabled');

//only enable the textbox next to the checkbox if it was checked
$(document).on('click','input[type=checkbox]',function(){
    if ($(this).is(':checked')) {

        $(this).parent().siblings('input[type=text]')
                        .removeAttr('disabled');
    } else {

        $(this).parent().siblings('input[type=text]')
                        .attr('disabled','disabled');
    }
});


//whenever the ENTER key is pressed within an enabled textbox, handle it
$(document).on('keyup','input[type=text]',function(e) {
    if(e.which == 13) {
        console.log( $(this).attr('id') + '=' + $(this).val() );
    }
});

<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>

Answer 3

就像Ahmad...我还重写了你的太复杂代码。

这让我的大脑流血了。
而且它最终完成了如此简单的任务！

关于 HTML 的变化，我只在标记中添加了disabled 属性 straith。

看看：

$("#mainForm input[type='checkbox']").on("click",function(){
  var text_input = $(this).parent().next("input");
  var text_input_dasbled = text_input.prop("disabled");
  text_input.attr("disabled", !text_input_dasbled); // Toggle disabled
});

$("#mainForm input[type='text']").on("keyup",function(e){
  if(e.which==13){
    var data = {[$(this).attr("name")]:$(this).val()};
    console.log(data)
    // $.ajax({ ... });
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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"
           disabled>
  </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"
           disabled>
  </div>
</form>