0

我有这段代码，它可以在单击按钮时动态创建 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>

内容.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>

我不知道如何选择相关跨度，以便仅插入的新值将仅显示在它的位置。

有人可以告诉我如何正确地做到这一点。预先感谢您的任何帮助。

例如。第一个输入 = A，第二个输入 = B，现在结果：div#1 显示 AB 和 div#2 显示 B，结果应该是：div#1 显示 A 和 div#2 显示 B

4

1 回答 1

0

如果您只需要显示插入的值，请使用html() 而不是append() ......

html()用于设置元素的内容，该元素中的任何内容都会被新内容完全替换

append()将参数指定的内容插入到匹配元素集中每个元素的末尾。

....
$.post(url,function(){
   $(".insertedText").html(textInserted);   //here
});

    …… 

更新

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));    
        }); 

//showing input
  var $form = $("#addCase"),
  url = $form.attr("action"),      
  textInserted=$("#name").val();    
  $.post(url,function(){
    $("#"+ idName).find(".insertedText").html(textInserted);   //updated here 
  });
  $("#inputText").remove();
  i++;  //increment to the end
});   
});
于 2012-12-31T05:24:07.677 回答