동적 양식 필드 및 미리보기 텍스트 패널

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를 부여하여 어떤 요소가 변경되었는지 콜백에서 지정하십시오.