Блог

Я пытаюсь создать форму с динамическими полями формы, где пользователь может добавлять и вычитать их по своему усмотрению, затем их ввод отображается на панели предварительного просмотра, чтобы они могли видеть, как это выглядит за пределами текстового поля. После того, как пользователь будет доволен своим вводом, я добавлю это в базу данных, при этом каждый шаг будет записываться по идентификатору, чтобы они соответствовали, когда потребуется позже.

Проблема в том, что я пытаюсь получить каждый ввод текста для предварительного просмотра, поскольку они являются динамическими, я пытаюсь найти способ сопоставления ввода текстового поля с разделением, используемым для предварительного просмотра каждого шага. Первый ввод обновит все новые динамически добавляемые div.

Вот скрипка, которая лучше всего описывает то, чего я пытаюсь достичь.

Вот несколько примеров кода:

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

 $('.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);
})
  

Когда всплывают события, вы должны слушать оболочку, потому что даже динамически добавляемые элементы отображают свои события там…

Вы можете присвоить элементам динамически создаваемые идентификаторы, чтобы вы могли точно указать в обратном вызове, какой элемент был изменен.