.change（ハンドラ）を使用している場合、JQueryで正しくバインドとアンバインドを行うにはどうすればよいですか？

Question

私はjsfiddleに私の問題を再作成しようとしました：

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

私はテキストエリアを持っている：

それをクリックし、約7行で垂直下方展開します。これを達成するのに役立つ同じメソッド内で、テキストが内部に入力されたり削除されたりすると、テキストエリアのサイズを自動的に変更できるいくつかのコードもあります。

私はカメラのアイコンを持っていますが、これをクリックすると、すぐにテキストエリアの下に表示される写真を1つ選択できます。

テキストエリアをクリックしないで写真を選択すると、テキストエリア内をクリックして拡大します。テキストエリアの自動サイズ変更を入力すると、テキストエリアが拡大するたびに写真がプッシュダウンされます。

テキストエリアを最初に展開してから写真を選択し、テキストエリアに入力すると、テキストエリアの自動サイズ変更が機能しなくなり、代わりにスクロールバーが表示されます。クリックしてテキストエリア（写真には表示されていないXボタン）を閉じると、テキストエリア内をクリックして拡大/縮小してからもう一度開いてから、テキストエリアの自動サイズ変更を入力し直してください。

.change（）は、私が行ったバインディングを気にしていないようです。 TextAreaの

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

    }); 

}); 

はここで、イメージを選択するための私のコードです。

種類は、あなたがchangeハンドラにli#addImage > spanがクリックされるたびに添付し

Answer 1

ここで私のコードを掘り下げた後、私は使用している自動サイズ変更のプラグインから問題が発生していることを発見しました。

スクロールバーの問題は、ブラウザでデベロッパーツールを開いたり閉じたりするときに発生します。私のウェブサイトを表示しています。ページのサイズ変更に問題があります。

私はテキスト領域で遊んでいますが、それは全く問題ありませんが、開発ツールを開いたり閉じるとすぐに、同じスクロールバーの問題が発生します。

Answer 2

について。 イベントハンドラの外に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の高さにリサイズされるようです。