使用Jquery預覽文本

Question

我正在創建一個系統，用戶可以在其中預覽配方的標題和步驟，我已經創建了一個動態表單，因此用戶可以添加更多步驟，預覽與標題和第一步一起工作，但是它似乎我無法在第二，第三，第四步中使用它。誰能幫我？任何幫助將不勝感激！

http://jsfiddle.net/uKgG2/

jQuery的

var commentNode = $('#lp-step'), 
    nameNode = $('#lp-name'); 

$('input, textarea').bind('blur keyup', function() { 
    commentNode.html($('textarea[name="step_detail[]"]').val().replace(/\n/g, '<br />')); 

    nameNode.text('Title: ' + $('input[name="name"]').val()); 
}); 

var addDiv1 = $('#addStep'); 
var i = $('#addStep p').size() + 1; 
$('#addNewStep').on('click', function() { 
    $('<p> <textarea id="step_' + i + '" name="step_detail[]"> </textarea><a href="#" class="remNew1">Remove</a> </p>').appendTo(addDiv1); 
    i++; 
    return false; 
}); 
$(document).on('click', '.remNew1', function() { 
    if (i > 2) { 
     $(this).parents('p').remove(); 
     i--; 
    } 
    return false; 
}); 

HTML

<label for="name">Enter recipe name:</label> 
      <input type="text" name="name"> 
      <br />   

<h1>Method</h1> 
      <div id="addStep"> 
       <p> 

        <textarea id="step_1" name="step_detail[]"></textarea> 
        <a href="#" id="addNewStep">Add</a> 

       </p> 
      </div> 
      <br /> 
      <button type="submit"> 
       Save on xml 
      </button> 
     </form> 

     <div id="live-preview-display"> 
      <div id="lp-name"> </div> 
      <div id="lp-step"> </div> 
     </div> 

Answer 1

您應該keyup或blur事件綁定到所有與add按鈕或鏈接任何新創建的文字區域。

改進

試試這個：

$('#addStep').on('keyup', 'textarea', function() { 
    step_id = $(this).attr('id'); 
    step_text = $('#' + step_id).val(); 

    if($('.'+step_id).length > 0) { 
     $('.'+step_id).text(step_text); 
     return; 
    } 

    p = document.createElement('p'); 
    p.className = step_id; 
    $(p).appendTo(commentNode); 
    $(p).text(step_text); 
}); 

它的工作！我也把它保存下來了。你應該只是更新recipe name並清理這個，因爲我說我非常哈克只是要改善它。好運。 http://jsfiddle.net/uKgG2/3/