Javascript 预览未加载到按键上

我不熟悉jQuery

我创建了这样的东西：当我单击

添加

按钮时，显示文本区域，并在文本区域中输入想要显示预览的数据

但预览不起作用

HTML:

文本框#1：

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

$（文档）.ready（函数（）{
var commentNode=$（“#lp comment”）；
//$（“#实时预览表单textarea”）.bind（'blur keyup'，function（）
commentNode.keypress（功能（事件）{
警惕（“测试”）；；
commentNode.text（$（'#comment'）.val（））；
commentNode.html（$（'#lp comment'）.html（）.replace（/\n/g，“
”）；
});
$（“#添加按钮”）。单击（函数（）{
//$（'add#comment_box'）.css（'display'，'block'）；
var newTextBoxDiv=$（document.createElement（'div'））.attr（“id”，“form'）.hide（）；
//newTextBoxDiv.after（）.html（'Textbox#：：'）；
newTextBoxDiv.after（）.html(
'' +
'' +
'' +
'' +
'' +
'');
newTextBoxDiv.appendTo（“#添加注释框”）.slideDown（）；
//$（“#textboxsgroup”）.append（newTextBoxDiv）；
});
$（“#canButton”）。单击（函数（）{
$（'#form'）.slideUp（函数（）{
$（'#form'）。删除（）；
});
返回false；
});
});

请参见底部的演示

在文本框中键入除“键入内容”之外的内容时，会在键控功能上触发处理程序。它也会在按钮单击事件上触发

---

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

查看此链接欢迎来到StackOverflow！您的问题能否更具体一点？您越具体，我们就越容易帮助您！@crynix jsfiddle.net/nGfh4link@Malai：代码几乎不足以解释你正在尝试做什么或者问题出在哪里。你说“预览不起作用”但这意味着什么？预览没有显示吗？它看起来不像你期望的样子吗？如果是，你期望它看起来如何？你有没有任何错误？请更具体一点。你的小提琴根本不起作用，因为它找不到jQuery…你期望我们如何帮助你？是的，我已经知道了。我要求你具体说明一下t什么不起作用，例如：“我希望预览有蓝色边框，但它是黑色的”或“如果我键入“*foo*”，我希望在预览中看到加粗的“foo”，但它不是加粗的”或“如果我键入任何字符，预览应该出现，但它确实出现”。

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