Eingangswechsel trigger zu oft

Question

Ich habe von Anfang an ein Eingabefeld, mit dem ich Berechnungen durchführen möchte, die bei Änderung des Wertes sofort aktualisiert werden. Dann möchte ich in der Lage sein, mehr Eingabefelder hinzuzufügen und sie die Werte ändern, wenn sie ihren Inhalt redigieren, ohne einen Aktualisierungsknopf danach zu drücken.

Dieser Code tut dies, aber jetzt feuert es die Berechnung Funktion mehrmals, wenn ich mehr Eingabefelder hinzufügen und dann eines der ersten Eingabefelder bearbeiten. Ich könnte Zeile 4-6 (von unten) entfernen, um die zusätzliche Funktion auszulösen, aber dann werden die hinzugefügten Eingabefelder nicht im Handumdrehen funktionieren. Irgendwelche Ideen, wie man das löst?

HTML:

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

JQuery/Javascript:

jQuery(function($) { 
    $('input').on('input', function(e) { 
    calculate(); 
    }); 
}); 

function calculate() { 
    alert("Checking how many times this function runs"); 
} 

$(document).ready(function() { 
    $("#btn").click(function() { 
    $("#linkedEventList ol").append("<li ><input type='text'></input></li>"); 

    $('input').on('input', function(e) { 
     calculate(); 
    }); 
    }); 
    calculate(); 
}); 

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

Answer 1

Sie müssen lediglich den Handler einmal als solche binden. Sie sind bei jedem Klick so gebunden, wie Sie ihn gerade haben. Außerdem verwenden Sie bereits eine 'bereit' Verknüpfung, so dass die zusätzliche document.ready unnötig ist.

Answer 2

eine Menge Dinge gibt, die Sie falsch den Code unten sehen zu tun und mit Ihrem Code vergleichen. Sie verwenden id nicht für alle Eingaben und binden an alle Eingaben jedes Mal, wenn der Click-Handler zum Hinzufügen von Eingaben aufgerufen wird, müssen Sie nur an die Eingabe binden, die zur Laufzeit erstellt wurde, nicht alle Eingaben jedes Mal.

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 3

Dies liegt daran, jedes Mal wenn Sie eine andere dynamische Eingabe Zuhörer hinzuzufügen auch an die Eingänge angelegt wird, die bereits dort waren.

Nach dem neuen Eingabe Verwendung Zugabe:

$(“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 
});