Question

我有动态添加字段的表单。我希望使用以下脚本将一个输入中的键入内容显示到另一个field：

<script>
  $(document).ready(function () {
    $('#field').keyup(function(){
      $('#target').html($(this).val());
    });
    $('#field_2').keyup(function(){
      $('#target2').html($(this).val());
    });

  });
</script>

只要第一个字段问题的所有工作都与第二个问题有关，因为target2标签中没有显示类型字符。

Here is JSFidle demo

有人可以给我一个提示如何在第二个标签中输入第一个添加的输入节目中的文字？

Answer 1

尝试使用.on()方法将事件委托给静态最近的父级：

$('#buildyourform').on('keyup', '#field_2', function(){
    $('#target2').html($(this).val());
});

demo @ Fiddle

Answer 2

尝试这样委托：

$('form').on("keyup", "#field", function(){..});

Answer 3

这对动态添加的对象不起作用。改为使用：

$('#field_container').on("keyup", "#field", function(){
  $('#target').html($(this).val());
});

Answer 4

这是一个非常酷的问题。您需要使用.on事件，但更确切地说，您的问题的解决方案是：

$('#buildyourform').on("keyup", ".textComesFromThisInput", function(){
    var index = $('#buildyourform').index($(this).parent());
    var targetDiv = $(':nth-child('+index+')');
    targetDiv.find('label').html($(this).val());
});


<div id="buildyourform">form</div>
    <div class="parentOfTextInputs">
        <div>
            <input type="text" class="textComesFromThisInput">
        </div>
        ...
    </div>
    <div class="parentOfTargetTextLabelsAndInputs">
        <div>
            <label class="textGoesInThisLabel"></label>
            <input type="text" class=".thisInputDoesNothing">
        </div>
        ...
    </div>
</div>

如果你像这样构建你的html，那就是你需要写的所有j。当您按箭头添加新项目时，您只需将带有标签和输入的div附加到.parentOfTargetTextLablesAndInputs 使用以下命令检查哪个输入对应于哪个标签：nth-child（）

这可以用于由该箭头添加的无限数量的项目，而不需要额外的js。

玩得开心。

Answer 5

尝试

$(document).on("keyup","#field2_2", function() {
     // do something    
});

keyup在动态添加字段中不起作用

5 个答案:

demo @ Fiddle