jqueryイベントリスナーを一連の固有の要素に追加します

Question

jQueryを使用して、すでに存在する一連の一意の入力の隣に一連の新しい入力を作成する関数を作成しようとしています。この関数は、新しい入力のそれぞれにイベントリスナーを追加して、その値が変更されたとき（たとえば何かが入力されたとき）、その隣にある元の入力の値が同じ値になるようにする必要があります。

最終的には、元のフォームを非表示にして、エンドユーザーが新しいフォームのみを表示するようにします。私は、フォームのどの部分をユーザーが表示/変更できるかを制御し、フォームの外観をより詳細に制御できるようにするためにこれを行います。私はこれをすべてやる必要がある理由は、Microsoft Sharepointのアイテム作成フォームを変更しているためです。変更する唯一の方法は、JavaScriptをページに追加することです。これを行うより良い方法があれば私はすべての耳です。私は比較的新しくコーディングしていて、Sharepointでコーディングするのがとても新しいです。

はとにかく、ここで私が持っているものです。

現在

var inputIdArr = [ 
    'OrigInput1', 
    'OrigInput2', 
    'OrigInput3', 
    'OrigInput4', 
    'OrigInput5', 
    'OrigInput6', 
    'OrigInput7' 
    ]; 

function newInputs(arr) { 
    for (str in arr) { 
     var elem = $("[id='" + inputIdArr[str] + "']"); 
     var parent = elem.parent(); 
     var newInputId = `newInput${str}` 
     var newInput = `<input type='text' id=${newInputId} />`; 

     parent.append(newInput); 
     $(`[id=${newInputId}]`).change(function() { 
      console.log(newInputId + " changed"); 
      elem.val($(`[id=${newInputId}]`).value); 
     }); 
    } 
} 

$(document).ready(function(){ 
    newInputs(inputIdArr); 
}); 

、コンソールは常に "newInput7が変更" ログに記録します。私はそれを修正する方法がわからないので、正しい新しい入力が変更されたことを記録します。私はまた、それが終わったらどこに行くかについての指針を使うこともできます。

Answer 1

動的に作成された要素の生成されたIDをプログラムで追跡することは、不必要に冗長なコードとメンテナンスの頭痛につながる反パターンです。

代わりにあなたがグループにロジックがはるかに簡潔で拡張可能な、単純なクラスとDOMのトラバーサルを使用して作成し、お互いに要素を関連付ける、このようなものができます。

$('input.orig').after('<input type="text" class="appended" />'); 
 

 
$('#container').on('input', 'input.appended', function() { 
 
    $(this).prev('.orig').val(this.value); 
 
})

.appended { 
 
    border: 1px solid #C00; 
 
} 
 
input { 
 
    display: block; 
 
    margin: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <input type="text" class="orig" /> 
 
    <input type="text" class="orig" /> 
 
    <input type="text" class="orig" /> 
 
</div>

はまた、注意してください# idセレクタが利用可能で、はるかに高速であれば、属性セレクタを使ってidで要素を見つけることは冗長です。

Answer 2

これはあなたのお粗末なスタートを与えるはずです、私は元の7つのフィールドを作成し、あなたの関数は新しいフィールドを正常に行います。ループの外側にある新しいフィールドにイベントやバインドを追加しました。これは私が思うような問題がいくつかあったからです。この$のような

// fields selection 
 
var inputIdArr = [ 
 
    'OrigInput1', 
 
    'OrigInput2', 
 
    'OrigInput3', 
 
    'OrigInput4', 
 
    'OrigInput5', 
 
    'OrigInput6', 
 
    'OrigInput7' 
 
]; 
 
// function for creating new fields 
 
function newInputs(arr) { 
 
    for (str in arr) { 
 
    var elem = $("[id='" + inputIdArr[str] + "']"); 
 
    var parent = elem.parent(); 
 
    var newInputId = `newInput${str}` 
 
    var newInput = `<input type='text' id=${newInputId} />`; 
 
    parent.append(newInput); 
 
    } 
 
} 
 
// create new inputs on dom ready 
 
$(document).ready(function() { 
 
    newInputs(inputIdArr); 
 
}); 
 

 
// bind new inputs and send value to org inputs 
 
$(document).on('input', '[id^="newInput"]', function(el){ 
 
    $(this).prev().val($(this).val()); 
 
});

input:nth-child(1){ border:1px solid red; } 
 
input:nth-child(2){ border:1px solid blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div><input type="text" id="OrigInput1"></div> 
 
<div><input type="text" id="OrigInput2"></div> 
 
<div><input type="text" id="OrigInput3"></div> 
 
<div><input type="text" id="OrigInput4"></div> 
 
<div><input type="text" id="OrigInput5"></div> 
 
<div><input type="text" id="OrigInput6"></div> 
 
<div><input type="text" id="OrigInput7"></div>