javascript - 预览未在按键上加载

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

请参阅此页面底部的演示。

在文本框中键入“键入内容”之外的内容时，会在keyup函数上触发处理程序。它还触发了按钮单击事件。

在keyup函数的处理程序中，您可以编写显示预览的逻辑。