預覽未加載按鍵

Question

我是jQuery的新手。

我創建了一些東西，如當我點擊add按鈕時顯示textarea，並在textarea中輸入要顯示預覽的數據。

但預覽無法工作

http://jsfiddle.net/nGfh4/

HTML：

<div id='TextBoxesGroup'> 
    <div id="TextBoxDiv1"> 
     <label>Textbox #1 :</label> 
     <input type='textbox' id='textbox1'> 
    </div> 
</div> 
<div id="add_comment_box"></div> 
<input type='button' value='Add Button' id='addButton'> 
<input type='button' value='Cancel Button' id='canButton'> 

的JavaScript：

$(document).ready(function() { 

    var commentNode = $('#lp-comment'); 
    //$(' #live-preview-form textarea').bind('blur keyup',function() 
    commentNode.keypress(function (event) { 
     alert('test');; 
     commentNode.text($('#comment').val()); 
     commentNode.html($('#lp-comment').html().replace(/\n/g, '<br />')); 
    }); 

    $("#addButton").click(function() { 

     // $('#add_comment_box').css('display','block'); 
     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'form').hide(); 
     // newTextBoxDiv.after().html('<label>Textbox # : </label> <input type="text" name="textbox" id="textbox" value="" >'); 
     newTextBoxDiv.after().html(
      '<div id="live-preview-form" class="lp-block">' + 
      '<textarea name="comment" id="comment" class="input" rows="10"></textarea>' + 
      '</div>' + 
      '<div id="live-preview-display" class="lp-block">' + 
      '<div id="lp-comment">' + 
      '</div>'); 
     newTextBoxDiv.appendTo("#add_comment_box").slideDown(); 
     // $("#TextBoxesGroup").append(newTextBoxDiv); 
    }); 

    $("#canButton").click(function() { 

     $('#form').slideUp(function() { 
      $('#form').remove(); 
     }); 
     return false; 
    }); 
}); 

Answer 1

見本page演示在底部。

在「Type Something」之外的文本框中輸入內容時，會觸發keyup函數。它也觸發了一個按鈕單擊事件。

在處理程序鍵入函數中，您可以編寫顯示預覽的邏輯。