0

私はjQueryが初めてです。

addボタンをクリックしてテキストエリアを表示し、プレビューを表示したいデータをテキストエリアに入力したときのようなものを作成しました。

しかし、プレビューが機能していません

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

1 に答える 1

0

下部にあるこのページのデモを参照してください。

「 TypeSomething」以外のテキストボックスに何かを入力すると、キーアップ関数でハンドラーがトリガーされます。また、ボタンクリックイベントでトリガーされました。

キーアップ関数のハンドラーで、プレビューを表示するロジックを記述できます。

于 2013-02-23T11:02:41.573 に答える