入力変更トリガーが何度も繰り返される

Question

最初から入力フィールドがあり、値を変更すると直ちに更新が行われます。次に、入力フィールドを追加し、後で更新ボタンを押さずに、コンテンツを編集するときに値を変更するようにしたいと考えています。

このコードはこれを行いますが、入力フィールドを追加して最初の入力フィールドの1つを編集すると、計算機能が何度か実行されます。私は余分な機能のトリガを取り除くためにライン4-6を（下から）削除することができますが、追加された入力フィールドは動作しません。どのようにこれを解決するための任意のアイデアですか？

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

あなたは、単にのようなかつてのハンドラをバインドする必要があります。現在のようにクリックごとにバインドしています。また、すでに「準備完了」のショートカットを使用しているので、追加のdocument.readyは不要です。

Answer 2

あなたは以下のコードを見て、あなたのコードと比較間違っているものがたくさんあります。入力を追加するためのクリックハンドラが呼び出されるたびに、すべての入力に対して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 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 
});