Javascript JQuery插件可以在JQuery方法链上调用，还是需要直接在选择器之后调用？

我很难让文本区域自动垂直扩展

我有一些代码可以帮助textarea自动垂直扩展，出于某种原因，当我清除所有的JS并提供一个关于textarea的选择器时，它会工作，例如

$（'textarea'）。autoGrow（）

在一系列方法上调用插件会阻止它工作。例如

micropostBox.hide().removeClass("micropost_content")
.addClass("micropost_content_expanded").show().autoGrow();

我建立了插件代码，将我所有的工作代码复制到同一个页面，并将

自动增长

代码应用到我的

文本区域

，但它似乎没有响应。我注意到我正在使用的插件使用了bind和unbind方法。在我的代码中，我使用了来自

JQuery

的on和off方法，不知道这是否就是为什么我的

textarea

的自动调整大小不起作用的原因

代码如下：

自动增长插件js代码

$(function($) {
    $.fn.autoGrow = function() {
        return this.each(function() {
            var txtArea = $(this);
            var colsDefault = txtArea.attr('cols');
            var rowsDefault = txtArea.attr('rows');

            var updateSize = function() {
                var linesCount = 0;
                var lines = txtArea.attr('value').split('\n');

                for (var i = lines.length - 1; i >= 0; --i) {
                    linesCount += Math.floor((lines[i].length / colsDefault) + 1);
                }

                if (linesCount >= rowsDefault) {
                    txtArea.attr('rows', linesCount + 1);
                }
                else {
                    txtArea.attr('rows', rowsDefault);
                }
            };
            txtArea.unbind('.autoGrow').bind('keyup.autoGrow', updateSize).bind('keydown.autoGrow', updateSize).bind('change.autoGrow', updateSize);
        });
    };
});

$(function() {

    $("div.microposts").on("focus", "textarea#micropostBox", function() {

        var micropostForm = $(this).parent(),
            micropostBox = micropostForm.find('textarea#micropostBox'),
            micropostButton = micropostForm.find("input#micropostButton"),
            xButton = micropostForm.find("div.xButton");


        micropostBox.prop('rows', 7);
        micropostForm.find('div#micropostOptions').removeClass('micropostExtraOptions');
        micropostForm.find('div#postOptions').show();
        $.trim(micropostBox.val()) == '' ? micropostButton.addClass("disabledMicropostButton").show()

        :

        micropostButton.prop('disabled', false);

        micropostBox.hide().removeClass("micropost_content").addClass("micropost_content_expanded").show().autoGrow();

        xButton.show();
        micropostButton.prop('disabled', true);


        micropostBox.off().on("keypress input change", function() {

            micropostButton.prop({
                disabled: !$.trim($(this).val()) != ''
            });

            $.trim($(this).val()) != '' ? micropostButton.removeClass("disabledMicropostButton").addClass("activeMicropostButton")

            :

            micropostButton.removeClass("activeMicropostButton").addClass("disabledMicropostButton");

        });

        xButton.on('click', function() {

            micropostBox.removeClass("micropost_content_expanded").addClass("micropost_content");
            micropostForm.find('div#micropostOptions').addClass('micropostExtraOptions');
            micropostBox.val("");
            micropostForm.find('div#postOptions').hide();
            xButton.hide();
            micropostButton.hide();
            micropostBox.removeAttr('style');
            micropostBox.prop('rows', 0);
            micropostForm.find('.imagePreview > img').remove();
            micropostForm.find('.imagePreview').hide();

        });

    });

});





$(function() {

    $('div.microposts').on('click', 'li#addImage', function() {

        var form = $(this).parents('form#new_micropost'),
            fileField = form.find('input#micropost_image');

        fileField.trigger('click');
    });

});

$(function() {

    $('input#micropost_image').change(function(evt) { //.off() make sautoresize work
        var image = evt.target.files[0],
            form = $(this).parents('form#new_micropost'),
            imagePreviewBox = form.find('div.imagePreview'),
            reader = new FileReader();

        reader.onload = function(evt) {
            var resultdata = evt.target.result,
                img = new Image();

            img.src = evt.target.result;
            imagePreviewBox.show().prepend(img);

        };

        reader.readAsDataURL(image);

    });
});​

我的js代码

$(function($) {
    $.fn.autoGrow = function() {
        return this.each(function() {
            var txtArea = $(this);
            var colsDefault = txtArea.attr('cols');
            var rowsDefault = txtArea.attr('rows');

            var updateSize = function() {
                var linesCount = 0;
                var lines = txtArea.attr('value').split('\n');

                for (var i = lines.length - 1; i >= 0; --i) {
                    linesCount += Math.floor((lines[i].length / colsDefault) + 1);
                }

                if (linesCount >= rowsDefault) {
                    txtArea.attr('rows', linesCount + 1);
                }
                else {
                    txtArea.attr('rows', rowsDefault);
                }
            };
            txtArea.unbind('.autoGrow').bind('keyup.autoGrow', updateSize).bind('keydown.autoGrow', updateSize).bind('change.autoGrow', updateSize);
        });
    };
});

$(function() {

    $("div.microposts").on("focus", "textarea#micropostBox", function() {

        var micropostForm = $(this).parent(),
            micropostBox = micropostForm.find('textarea#micropostBox'),
            micropostButton = micropostForm.find("input#micropostButton"),
            xButton = micropostForm.find("div.xButton");


        micropostBox.prop('rows', 7);
        micropostForm.find('div#micropostOptions').removeClass('micropostExtraOptions');
        micropostForm.find('div#postOptions').show();
        $.trim(micropostBox.val()) == '' ? micropostButton.addClass("disabledMicropostButton").show()

        :

        micropostButton.prop('disabled', false);

        micropostBox.hide().removeClass("micropost_content").addClass("micropost_content_expanded").show().autoGrow();

        xButton.show();
        micropostButton.prop('disabled', true);


        micropostBox.off().on("keypress input change", function() {

            micropostButton.prop({
                disabled: !$.trim($(this).val()) != ''
            });

            $.trim($(this).val()) != '' ? micropostButton.removeClass("disabledMicropostButton").addClass("activeMicropostButton")

            :

            micropostButton.removeClass("activeMicropostButton").addClass("disabledMicropostButton");

        });

        xButton.on('click', function() {

            micropostBox.removeClass("micropost_content_expanded").addClass("micropost_content");
            micropostForm.find('div#micropostOptions').addClass('micropostExtraOptions');
            micropostBox.val("");
            micropostForm.find('div#postOptions').hide();
            xButton.hide();
            micropostButton.hide();
            micropostBox.removeAttr('style');
            micropostBox.prop('rows', 0);
            micropostForm.find('.imagePreview > img').remove();
            micropostForm.find('.imagePreview').hide();

        });

    });

});





$(function() {

    $('div.microposts').on('click', 'li#addImage', function() {

        var form = $(this).parents('form#new_micropost'),
            fileField = form.find('input#micropost_image');

        fileField.trigger('click');
    });

});

$(function() {

    $('input#micropost_image').change(function(evt) { //.off() make sautoresize work
        var image = evt.target.files[0],
            form = $(this).parents('form#new_micropost'),
            imagePreviewBox = form.find('div.imagePreview'),
            reader = new FileReader();

        reader.onload = function(evt) {
            var resultdata = evt.target.result,
                img = new Image();

            img.src = evt.target.result;
            imagePreviewBox.show().prepend(img);

        };

        reader.readAsDataURL(image);

    });
});​

textarea

 <textarea class="micropost_content" cols="40" id="micropostBox" name="micropost[content]" placeholder="" rows="0"></textarea>

最好查看JSFIDLE上的工作示例。我的目标是让textarea的自动大小调整在使用textarea中的图像上载按钮将图像添加到页面之前和之后都能正常工作

---

这取决于插件调用之前的方法是否返回了包含插件需要附加到的元素的jQuery对象

下面是一些方法示例，这些方法可以返回也可以不返回您开始使用的元素：

$('element')           //get an element
    .contents()        //get an elements contents
    .wrapAll('<div>')  //wrapAll contents with div and returns the contents, not wrapper
    .parent()          //the wrapper
    .parent()          //the element
    .myPlugin()        //we attach a plugin to element

$('<div>')
    .appendTo('body')  //appendTo returns the same element, the div
    .myPlugin()        //attaches to the div

$('element')           //get an element
    .text()            //get its text
    .myPlugin()        //chaining isn't possible since text() returns a string

$（'element'）//获取一个元素
.contents（）//获取元素内容
.wrapAll（“”）//wrapAll包含div的内容并返回内容，而不是包装器
.parent（）//包装器
.parent（）//元素
.myPlugin（）//我们将插件附加到元素
$('')
.appendTo（'body'）//appendTo返回相同的元素div
.myPlugin（）//附加到div
$（'element'）//获取一个元素
.text（）//获取其文本
.myPlugin（）//无法链接，因为text（）返回字符串

最好阅读jQuery中每个方法的文档及其返回的内容。有些DOM方法通常返回相同的元素，有些不返回，有些不返回元素但返回值

---

总之，插件可以在链接之后附加吗？是的，视情况而定。

请参阅jQuery的文档

---

在我的代码中有micropostBox.hide（）.removeClass（“micropost内容”）.addClass（“micropost内容展开”）.show（）.autoGrow（）；。。。。元素仍然在链的末尾，因为我只隐藏、显示、添加和删除类。插件代码仍然无法工作。顺便说一句，这是一个很好的例子。使用.off（）将代码部分修改为.off（'focus'）。解决了我的问题。