Question

我正在尝试创建一个具有动态表单字段的表单，用户可以根据需要对其进行添加和减去，然后将它们输入显示在预览面板中，以便它们可以看到它在文本外部的外观框。用户对输入感到满意后，我会将其添加到数据库中，每个步骤都会根据ID进行记录，以便在以后需要时将它们排成一行。

我遇到的麻烦是我试图让每个文本输入都预览，它们是动态的我试图找到将文本字段的输入与用于预览每个步骤的分区相匹配。第一个输入将更新所有新动态添加的div。

这里的a fiddle最能说明我想要完成的事情。

以下是一些示例代码：

HTML

<div id='left'>
<div id='stepWrap'>
    <div class = 'steps'>
        <p class = 'stepNum'>Step 1</p>
        <textarea class = 'step'></textarea>
    </div>

</div><!-- end #stepWrap -->
<input type='button' id='addStep' value='Add Step'>
<input type='button' id='removeStep' value='Remove Step'>
</div>
<div id='showSteps'>
    <div class='preview'>
        <h3>Step 1</h3>
        <p class='stepView'>
        </p>

    </div>    
</div>

Jquery

$('document').ready(function(){

//------------------------------- functions to add and remove input areas.
    var stepNum = 1;

    $('#addStep').click(function(){
        stepNum ++;
        $('#stepWrap').append('<div class="steps"><p class="stepNum">Step '+stepNum+'</p><textarea class="step"></textarea></div>');
        $('#showSteps').append('<div class="preview"><h3>Step '+stepNum+'</h3><p class="stepView"></p></div>');
    });

    $('#removeStep').click(function(){
        stepNum --;
        $('.preview').last().remove();
        $('.steps').last().remove();
    });

//------------------------------ function to auto update preview panel
// This is where I am having trouble, I'm not sure how to match the dynamically generated input with the output preview div's.

    $('.step').each(function(){
        $(this).keyup(function(){
            var output = $(this).val();
            $('.stepView').empty().append(output);
        });
    });
});

Answer 1

$('.step').each(function(){
        $(this).keyup(function(){
            var output = $(this).val();
            $('.stepView').empty().append(output);
        });
    });

这应该更像

$('#stepwrap').on("keyup",".step",function(){
  var output = $(this).val();
  $('.stepView').empty().append(output);
})

当事件冒出来时，你应该听一下包装器，因为即使是动态添加的元素也会在那里冒泡它们......

您可以为elemnts提供动态创建的ID，以便您可以在回调中准确指定哪个元素已更改。

动态表单字段和预览文本面板

1 个答案: