从动态创建的输入写入动态创建的div

Question

当我输入动态创建的输入字段时，如何更新动态创建的div的内容。

首先，我有一个输入，请求我想要的代码块数量：

$("#count-trigger").click(function(){
    var count = $("#slide-count").val();
    if (count !== "" && $.isNumeric(count)) {
        var i = 1;
        while (i <= count) {
            $('.appendHere').append(

 // Div I want to write to.
 '<div 'id="slide-content_'+i+'">'Sample Title </div>'+

 // Input field used to populate above div
 ' <input                                            '+ 
 '   type    = "text"                                '+
 '   name    = "slide_name_'+i+'"                    '+
 '   data-target    = "slide_name_'+i+'"             '+
            ));
            i++;
        }
});

以上是非常明显的，输入值按go go我得到x个div /输入。

当我在创建的输入中输入时尝试填充创建的div时出现问题。

任何帮助将不胜感激。

Answer 1

您可以使用IIFE为每次迭代保留范围，并使用稍后使用的变量。在最新的ECMA中，您甚至可以使用块级范围。

$("#count-trigger").click(function() {
  var count = $("#slide-count").val();
  var i = 1;
  while (i <= count) {
    (function() {
      var codeOutput, codeInput;
      codeOutput = $('<div class="code">');
      codeInput = $('<input type="text"/>');
      codeInput.on('input', function() {
        codeOutput.text($(this).val())
      })
      $('.appendHere').append(codeInput, codeOutput);
    })();
    i++;
  }
});

.code {
  border: 1px dashed #bc0000;
  min-height: 20px;
}

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

<input id="slide-count" type="number" />
<button id="count-trigger">Create</button>

<div class="appendHere"></div>

Answer 2

好的，所以@zak提出的改变就行了。

我在每个输入中添加了一个onchange="liveUpdate(input_id)"。

然后添加此功能

function liveUpdate(e_id) {
    var typed = $('#'+e_id).val();
    $('[data-target='+e_id+']').text(typed);
}

我想有一个更好的解决方案，但考虑到我对js的吸引力以及它完美运行的事实 - 我很高兴。