ボタンのオンクリックで動的にdivを作成するこのコードがあります。作成された div 内で、ユーザーの入力と送信を求めます。送信すると、同じ div に入力が表示され、同じことを行う別の div が作成されます。表示された値は各 div にとどまる必要があり、すべての div は関連する入力のみを表示する必要があります。
var i=1;
$(document).ready(function(){
$("#addCase").submit(function(event) {
event.preventDefault();
//adding div
var idName ="Div_num_"+i;
$('.newValue').show();
$('<div />').attr({
'id' : idName
}).appendTo('#container').load("content.php", function() {
$('<h3>'+idName+'</h3>').prependTo($(this));
});
i++;
//showing input
var $form = $("#addCase"),
url = $form.attr("action"),
textInserted=$("#name").val();
$.post(url,function(){
$(".insertedText").append(textInserted);
});
$("#inputText").remove();
});
});
html :
<form id="addCase" method="post" action="">
<div id="container"></div>
<input id="addNew" type="submit" value="Add Case">
</form>
content.php
<div id="inputText"><p>Text :<input name="name" id="name" type="text"/></p></div>
<div style="display:none;" class="newValue"><p> Inserted Text :<span class="insertedText"></span></p></div>
関連するスパンを選択する方法がわからないため、挿入された新しい値のみがその場所にのみ表示されます。
誰かがそれを適切に行う方法を教えてもらえますか。よろしくお願いします。
例えば。1 番目の入力 = A、2 番目の入力 = B 、現在の結果: div#1 show AB および div#2 show B 、結果は次のようになります: div#1 show A および div#2 show B