Javascript 使用.change（handler）时，如何在JQuery中正确绑定和解除绑定？

我尝试在JSFIDLE中重新创建我的问题：

我有一个文本区：

单击时，它会垂直向下扩展约7行。在帮助实现这一点的同一个方法中，我还提供了一些代码，使textarea在文本被输入或删除时能够自动调整大小

无论如何，正如你所看到的，我有一个摄像头图标，当点击时，用户可以立即选择一张照片，该照片将显示在文本区域下方

如果我选择photo而不单击textarea来展开它，那么单击textarea来展开它，按住enter键，textarea的自动调整大小功能将发挥作用。。基本上每次文本区域扩展时都会向下推照片

如果我先展开textarea，然后选择一张照片，然后在textarea中按住enter键，则textarea的自动调整大小不起作用，相反，我会看到一个滚动条显示。如果我点击关闭textarea（图片中未显示X按钮），然后点击textarea再次展开/打开它，然后按住enter（输入textarea的自动调整大小）再次工作

似乎是这样。变化似乎不在乎我做的任何装订

以下是我的图像选择代码：

以下是textarea的代码：

如果我的代码看起来很乱，我道歉

每次单击liaddImage>span时，您都会附加更改处理程序。您应该在click事件处理程序之外设置更改处理程序

$(function() {
    $('div.microposts').on('click', 'li#addImage > span', function() {
        var form = $(this).parents('form#new_micropost'),
            fileField = form.find('input#micropost_image');
        fileField.trigger('click');
    });

    $('input#micropost_image').on('change', function(evt) {
        var image = evt.target.files[0]; //[0] first entry of file selected
        if (!image.type.match("image.*")) {
            alert('not an image');
            return;
        }
        var reader = new FileReader();
        reader.onload = function(evt) {
            var resultdata = evt.target.result;
            var img = new Image();
            img.src = evt.target.result;
            $(evt.target).parents('form#new_micropost').find('div.imagePreview').show().prepend(img);
        }
        reader.readAsDataURL(image);
    });
});​

---

这将解决图像出现10次的问题。在没有看到代码的情况下，我无法对自动调整大小进行评论。在后一种情况下，它的大小似乎可以调整到260px高。

在这里和那里翻阅我的代码后，我发现问题来自我正在使用的自动调整大小插件

当我在浏览网站的浏览器中打开和关闭开发人员工具时，会出现滚动条问题。所以这是页面大小调整的问题

---

我在文本区玩，这完全没问题，但一旦我打开或关闭开发工具，我就会遇到同样的滚动条问题。

这是自动调整大小插件：我会在上面试用你的代码，谢谢你编辑你的帖子，以便清楚地定义你的问题？所有这些编辑：固定的东西让我觉得这里什么都没有了。

$(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"),
            removeAutosizeStyle = function() { 
                micropostForm.parents('html').find('textarea.autosizejs').remove(); 
            };

                removeAutosizeStyle();

                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().autosize();  

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

    });

});

$(function() {
    $('div.microposts').on('click', 'li#addImage > span', function() {
        var form = $(this).parents('form#new_micropost'),
            fileField = form.find('input#micropost_image');
        fileField.trigger('click');
    });

    $('input#micropost_image').on('change', function(evt) {
        var image = evt.target.files[0]; //[0] first entry of file selected
        if (!image.type.match("image.*")) {
            alert('not an image');
            return;
        }
        var reader = new FileReader();
        reader.onload = function(evt) {
            var resultdata = evt.target.result;
            var img = new Image();
            img.src = evt.target.result;
            $(evt.target).parents('form#new_micropost').find('div.imagePreview').show().prepend(img);
        }
        reader.readAsDataURL(image);
    });
});​