Плагин JQuery AutoGrow не работает после функции AJAX - PullRequest
Новая
       25

Плагин JQuery AutoGrow не работает после функции AJAX

1 голос
/ 27 декабря 2011

Плагин jQuery autogrow расширяет область текста в соответствии с их содержимым. Функция выглядит следующим образом. 

(function($) {
    /*
     * Auto-growing textareas; technique ripped from Facebook
     */
    $.fn.autogrow = function(options) {

        this.filter('textarea').each(function() {

            var $this       = $(this),
                minHeight   = $this.height(),
                lineHeight  = $this.css('lineHeight');

            var shadow = $('<div></div>').css({
                position:   'absolute',
                top:        -10000,
                left:       -10000,
                width:      $(this).width(),
                fontSize:   $this.css('fontSize'),
                fontFamily: $this.css('fontFamily'),
                lineHeight: $this.css('lineHeight'),
                resize:     'none'
            }).appendTo(document.body);

            var update = function() {

                var val = this.value.replace(/</g, '&lt;')
                                    .replace(/>/g, '&gt;')
                                    .replace(/&/g, '&amp;')
                                    .replace(/\n/g, '<br/>');

                shadow.html(val);
                $(this).css('height', Math.max(shadow.height() + 20, minHeight));
            }

            $(this).change(update).keyup(update).keydown(update);

            update.apply(this);

        });

        return this;

    }

})(jQuery);

Затем запускается $('textarea').autogrow();. После функции загрузки JQuery мы загружаем новую текстовую область. Таким образом я вызвал это. 

$('.commentslogic').load(window.location.href + ' .commentslogic .inner', function(){
$('textarea').autogrow();
});

Но это не относится к новой текстовой области, более того, в FireBug не сообщается об ошибке. Помогите!

Fiddle dee dee Fiddle dee dum http://jsfiddle.net/JTmND/8/

1 Ответ

2 голосов
/ 27 декабря 2011

Как выяснилось в комментариях, эта скрипка является решением: http://jsfiddle.net/JTmND/11/

$(document).ready(function() {
    $('textarea').autogrow();

    $('.button').click(function() {
        $('.test').html('<textarea></textarea>');
        $('.test').find('textarea').autogrow();
    });
});

Не имеет значения, как новые текстовые области добавляются в DOM (вручную или методом обратного вызова ajax), необходимо использовать селекторы jquery, чтобы назначить функцию автоматического увеличения.

...