Question

我正在摆弄js / jquery ..我正在尝试根据表单中输入的数据创建预览。在其中一个输入字段中，每次按Tab键时脚本都会添加新字段（换句话说，选择下一个字段）。因此，从这些动态字段中，我想从前两个字段中检索数据并将它们放入预览中。我所做的是运行一个函数，在id的末尾添加一个数字到这些字段，所以他们根据打开的字段数获得名称contestant_1，contestant_2等。然后我希望来自contestant_1和_2的数据在预览中的框中输入。然后我做了另一个函数，等待其中一个输入字段的keyup事件。但是在获得_1和_2之后它无法对它们作出反应。如果我在名为_1的第一个字段中硬编码，那么它会出现在预览中。在图片中你可以看到我在前两个字段中输入了Boks1和Boks2（Box1和2 i Norewegian），但只有Boks1出现。

表 http://imgur.com/fmmYnBu

预览 http://imgur.com/NcI4lN1

当字段中发生某些事情时执行此代码

$('#tname').keyup(update_tname);
$('#contestant_1').keyup(update_contestant_1);
$('#contestant_2').keyup(update_contestant_2);

这是更新的功能，只有最后两个对此具有一定重要性。

function update_contestant_1(){
  console.log("Inne i update_contestant_1");
  $('#preview').slideDown();
  $('#pview_contestant_1').fadeIn();
 // Values to preview
  var contestant_1 = $('#contestant_1').val();
  $('#display_contestant_1').html(contestant_1);
        }

输入字段如下所示

<lable for="contestant" class="col-md-2 control-label">Contestants:</lable>
<div class="input-group input-group-option col-md-4">
  <input class="form-control" type="text" id="contestant_" name="option[]"  placeholder="Write contestant here..." required></input>
<span class="input-group-addon input-group-addon-remove">
  <span class="glyphicon glyphicon-remove"></span>
</span>
</div>

这是创建新字段，更改ID并删除它们的功能

$(function () {
  // Variable for counting how many contestants fields that are open
  var i=0;
    $(document).on('focus', 'div.form-group-options div.input-group-option:last-child input', function () {
        var sInputGroupHtml = $(this).parent().html();
// Uncomment comments below to inherit div classes from div on index page.
// This is not in use now, because we need a offset to line input fields below each other
        // var sInputGroupClasses = $(this).parent().attr('class');
        // $(this).parent().parent().append('<div class="' + sInputGroupClasses + '">' + sInputGroupHtml + '</div>');
        $(this).parent().parent().append('<div class="input-group input-group-option col-md-4 col-md-offset-2">' + sInputGroupHtml + '</div>');
        // Adds a number at the end of the ID
        i++;
        console.log(i);
        var newID='contestant_'+i;
        $(this).attr('id',newID);
    });

    $(document).on('click', 'div.form-group-options .input-group-addon-remove', function () {
        $(this).parent().remove();
        // Counts down so the next contestants field that opens, has the right number
        i--;
        console.log(i);
        var newID='contestant_'+i;
        $(this).attr('id',newID);
    });

});

我会很乐意为你提供帮助。

另外，希望我做得对，这是我在这里的第一篇文章。

无法从动态创建的输入字段中获取数据

0 个答案: