javascript - 使用 .change(handler) 时如何在 JQuery 中正确绑定(bind)和取消绑定(bind)？

Question

我尝试在 jsfiddle 中重新创建我的问题:

http://jsfiddle.net/erU5J/72/

我有一个文本区域:

单击时，它会垂直向下扩展约 7 行。在有助于实现此目的的同一方法中，我还有一些代码可以使文本区域在内部键入或删除文本时自动调整大小。

无论如何，如您所见，我有一个相机图标，单击该图标时，用户可以立即选择一张照片，该照片将显示在文本区域下方。

如果我选择照片而不单击文本区域来展开它，然后单击文本区域来展开它，按住输入文本区域的自动调整大小工作......基本上每次文本区域展开时都会将照片向下推。

如果我先展开文本区域，然后选择一张照片，然后在文本区域中按住 Enter 键，则文本区域的自动调整大小不起作用，而是显示滚动条。如果我单击关闭文本区域(照片中未显示的 X 按钮)，然后单击文本区域以再次展开/打开它，然后按住 Enter 键，文本区域的自动调整大小将再次起作用。

看起来 .change() 似乎并不关心我所做的任何绑定(bind)。

这是我的图像选择代码:

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

    });
});

这是文本区域的代码:

$(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

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

    $('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。