下記のソースに対して
appendボタンクリック後、
btn2をクリックしたときにchangeイベントの機能をOFFにした後、btn3をクリックすれば
changeイベントの機能をonにし、チェックボックスの値を変更したらその値を表示するようにしたいのですがうまくいきません。どう修正すればうまくいきますでしょうか。

<body>
  <button id="btn1">append</button>
  <button id="btn2">btn2</button>
  <button id="btn3">btn3</button>

  <select style="width:10%" name="select-name" class="my-select">
  </select>

  <h2>変更結果</h2>
  <div class="show-change-value"></div>
  <script type="text/javascript">
  $(function() {
    //コンボボックス初期値
    $(".my-select").append($('<option>').html("追加される項目名").val("追加される値"));
    // changeイベントをOFF
    $("#btn2").click(function() {
      $("select").off("change");
    });
    // changeイベントをon
    $("#btn3").click(function() {
      $("select").on("change");
    });
    //　コンボボックス値追加
    $("#btn1").click(function() {
      var characters = {
        tanaka: '田中',
        nakata: '中田',
        yosida: '吉田'
      },
      $select = $('.my-select'),
      $option,
      options,
      isSelected;

      options = $.map(characters, function (name, value) {
        isSelected = (value === 'yosida');
        $option = $('<option>', { value: value, text: name, selected: isSelected });
        return $option;
      });
      $select.append(options);
    });

    $("select").change(function () {
      var str = $("option:selected", this).text() + ":" + $("option:selected", this).val()
      $( ".show-change-value" ).text( str );
    });
  });
  </script>
</body>