Question

我试图在jsfiddle中重现我的问题：

我有一个textarea：

enter image description here

点击它时，它会向下垂直向下扩展约7行。在帮助实现这一目标的同一方法中，我还有一些代码可以让textarea在文本输入内部或删除时自动调整大小。

无论如何，你可以看到我有一个相机图标，当点击它时，用户可以立即选择一张将出现在文本区域下方的照片。

如果我选择照片而不点击textarea来展开它，那么点击textarea进行展开，然后按住进入textarea工作的自动调整大小。基本上每次textarea展开时都按下照片。

如果我首先展开textarea然后选择一张照片，然后按住在textarea中输入textarea的自动调整大小不起作用，而是我得到一个滚动条显示。如果我单击关闭textarea（照片中未显示的X按钮），然后单击textarea再次展开/打开它，然后按住再次输入textarea的自动调整大小。

似乎.change（）似乎并不关心我所做的任何绑定。

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

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

});

$(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的代码：

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

    });

});

如果我的代码显得凌乱，我道歉。

亲切的问候

Answer 1

每次点击change时，您都会附加li#addImage > span处理程序。您应该在change事件处理程序之外设置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的高度。

Answer 2

在这里和那里挖掘我的代码后，我发现问题来自我正在使用的自动调整插件。

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

我玩文本区域并且它完全没问题，但是一旦打开或关闭开发人员工具，我就会遇到同样的滚动条问题。

使用.change（处理程序）时，如何在JQuery中正确绑定和解除绑定？

2 个答案: