Question

我是jQuery的新手。

我创建的内容就像点击add按钮显示textarea并在textarea中输入要显示预览的数据。

但预览不起作用

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 函数上触发处理程序。它也会在按钮点击事件中触发。

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

预览不在按键上加载

1 个答案: