JQuery AutoGrow 插件在 AJAX 功能后无效

发布于 2024-12-22 23:01:09 字数 1824 浏览 3 评论 0原文

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

但它不适用于新的textarea，而且FireBug中也没有报错。帮助！

小提琴迪迪小提琴迪迪杜姆 http://jsfiddle.net/JTmND/8/

原文

The jQuery autogrow plugin expands textarea to fit their content. The function is as follows.

(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, '<')
                                    .replace(/>/g, '>')
                                    .replace(/&/g, '&')
                                    .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);

It is then triggered $('textarea').autogrow();. After a JQuery load function we load in a new textarea. Thus I triggered this.

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

But it does not apply to the new textarea, furthermore there is no error reported in FireBug. Help!

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

‖放下 2024-12-29 23:01:09

正如评论中所指出的，这个小提琴是解决方案： http://jsfiddle.net/JTmND/11/< /a>

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

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

无论新的文本区域如何添加到 dom（手动或通过 ajax 回调方法），都需要使用 jquery 选择器来分配自动增长功能。

As figured out in the comments, this fiddle is the solution: http://jsfiddle.net/JTmND/11/

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

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

It doesn't matter how the new textareas are added to the dom (manually or by ajax callback method), it is necessary to use jquery selectors to assign the autogrow functionality.

回复收藏 0 原文

~没有更多了~