Предварительный просмотр текста с использованием Jquery

Question

Предварительный просмотр текста с использованием Jquery

0

Я создаю систему, в которой пользователь может просмотреть заголовок и шаги рецепта, я создал динамическую форму, чтобы пользователь мог добавлять дополнительные шаги, просмотр работает с заголовком и первым шагом, однако кажется, что я не могу получить он должен работать на втором, третьем, четвертом шаге. Может кто-нибудь мне помочь? Любая помощь будет принята с благодарностью!

http://jsfiddle.net/uKgG2/

Jquery

var commentNode = $('#lp-step'),
    nameNode = $('#lp-name');

$('input, textarea').bind('blur keyup', function () {
    commentNode.html($('textarea[name="step_detail[]"]').val().replace(/\n/g, '<br />'));

    nameNode.text('Title: ' + $('input[name="name"]').val());
});

var addDiv1 = $('#addStep');
var i = $('#addStep p').size() + 1;
$('#addNewStep').on('click', function () {
    $('<p> <textarea  id="step_' + i + '" name="step_detail[]"> </textarea><a href="#" class="remNew1">Remove</a> </p>').appendTo(addDiv1);
    i++;   
    return false;
});
$(document).on('click', '.remNew1', function () {
    if (i > 2) {
        $(this).parents('p').remove();
        i--;
    }
    return false;
});

HTML

<label for="name">Enter recipe name:</label>
            <input type="text" name="name">
            <br />          

<h1>Method</h1>
            <div id="addStep">
                <p>

                    <textarea id="step_1" name="step_detail[]"></textarea>
                    <a href="#" id="addNewStep">Add</a>

                </p>
            </div>
            <br />
            <button type="submit">
                Save on xml
            </button>
        </form>

        <div id="live-preview-display">
            <div id="lp-name"> </div>
            <div id="lp-step"> </div>
        </div>

Nick Pocock 14 дек. 2013, в 15:21

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Morteza Edalati · Accepted Answer · 2013-12-14T12-49-00.000Z

Вы должны привязать событие keyup или blur ко всем новым текстовым областям, которые создаются с помощью кнопки add или ссылки.

Улучшен

попробуй это:

$('#addStep').on('keyup', 'textarea', function () {
     step_id = $(this).attr('id');
     step_text = $('#' + step_id).val();

     if($('.'+step_id).length > 0) {
         $('.'+step_id).text(step_text);
         return;
     }

     p = document.createElement('p');
     p.className = step_id;
     $(p).appendTo(commentNode);
     $(p).text(step_text);
});

это сработало! Я тоже ее спасла. вы должны просто обновить recipe name и очистить его, поскольку я сказал, что я очень взломан, просто нужно его улучшить. http://jsfiddle.net/uKgG2/3/

я просто попробовал это на скрипке и не сработало, не могли бы вы отредактировать и сохранить скрипку и показать мне, что было бы здорово
Вы должны использовать jQuery 1.9.1, чтобы это работало.