Question

我从一开始就有一个输入字段，我希望在更改值时立即更新。然后我希望能够添加更多输入字段，并让他们在编辑内容时更改值，而不会在之后按任何更新按钮。

此代码执行此操作，但现在如果我添加更多输入文件然后编辑其中一个输入字段，它会多次触发计算功能。我可以删除4-6行（从底部）去除额外的功能触发，但随后添加的输入字段不会动态地工作。关于如何解决这个问题的任何想法？

HTML：

Traceback (most recent call last):
  File "C:\Program Files\Anaconda3\lib\threading.py", line 916, in _bootstrap_inner
    self.run()
  File "C:\Program Files\Anaconda3\lib\threading.py", line 864, in run
    self._target(*self._args, **self._kwargs)
  File "C:/Project/src/client.py", line 36, in init_sock
    self.servsock.connect((host, port))
  File "C:\Program Files\Anaconda3\lib\ssl.py", line 1093, in connect
    self._real_connect(addr, False)
  File "C:\Program Files\Anaconda3\lib\ssl.py", line 1084, in _real_connect
    self.do_handshake()
  File "C:\Program Files\Anaconda3\lib\ssl.py", line 1061, in do_handshake
    self._sslobj.do_handshake()
  File "C:\Program Files\Anaconda3\lib\ssl.py", line 683, in do_handshake
    self._sslobj.do_handshake()
ConnectionResetError: [WinError 10054] An existing connection was forcibly closed by the remote host

Jquery的/使用Javascript：

<input type="number">
<table>
  <tr>
    <td id="linkedEventList">
      <ol>
      </ol>
      <button id="btn">Add input fields</button>
    </td>
  </tr>
</table>

https://jsfiddle.net/Marbled/mtp9vh3a/1/

Answer 1

有很多事情你看错了，看看下面的代码并与你的代码进行比较。您没有对任何输入使用id并且每次调用添加输入的单击处理程序时都绑定到所有输入，您只需要绑定到在运行时创建的输入，而不是每次都输入所有输入。

var callstofunc = 0;


function calculate() {
  callstofunc++;
  console.log("Checking total count for calculate function called", callstofunc);
}

$(document).ready(function() {
  $('#calculator').on('keydown', function(e) {
    calculate();
  });
  $("#btn").click(function() {
    let countT = $("#linkedEventList ol").find('input').length;
    $("#linkedEventList ol").append("<li ><input type='text' id='input_" + countT + "'></input></li>");

    $("#linkedEventList ol").find('input#input_' + countT).on('keydown', function(e) {
      calculate();
    });
  });
  calculate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="72" id="calculator">
<table>
  <tr>
    <td id="linkedEventList">
      <ol>
      </ol>
      <button id="btn">Add input fields</button>
    </td>
  </tr>
</table>

Answer 2

您只需要将处理程序绑定一次。您可以按照当前的方式对每次点击进行约束。此外，您已经使用了“准备好”的快捷方式，因此不需要额外的document.ready。

jQuery(function($) {

  function calculate() {
    console.log("calculate");
  }

  $("#btn").click(function() {
    $("#linkedEventList ol").append("<li><input type='text'></input></li>");
  });
  
  $(document).on('input','input', function(){
    calculate();
   });
  
  calculate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number">
<table>
  <tr>
    <td id="linkedEventList">
      <ol>
      </ol>
      <button id="btn">Add input fields</button>
    </td>
  </tr>
</table>

Answer 3

这是因为每次添加另一个动态输入侦听器时，它也会应用于已存在的输入。

添加新输入后使用：

$(“input”).eq(($(“input”).length-1)).on(“input”, function(e) {
    //this code only applies to the input event on the last input
    //you can use change, input, keyup/down
    //whichever best fits your case
});

输入更改触发次数过多

3 个答案: