46802


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

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2018-07-21T02:50:22.993
46800
2018-07-21T04:57:21.317
17348
question
jquery
changeイベント機能OFF後の再登録について。


[.on()](http://api.jquery.com/on/)にあるように、`$("select").on("change")`には引数として、`change`イベントが発生した時のハンドラを指定する必要があります。

そのため、以下のように、`$("select")`の`change`イベントとして登録するイベントハンドラを変数(`onchangeHandler`)に保存し、`$("select").on("change")`のイベントハンドラとしても利用できるようにすれば良いと思います。

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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() {
        // 共通で利用する$("select")用changeイベントハンドラ
        var onchangeHandler = function () {
          var str = $("option:selected", this).text() + ":" + $("option:selected", this).val()
          $( ".show-change-value" ).text( str );
        };
      
        //コンボボックス初期値
        $(".my-select").append($('<option>').html("追加される項目名").val("追加される値"));
        // changeイベントをOFF
        $("#btn2").click(function() {
          $("select").off("change");
        });
        // changeイベントをon
        $("#btn3").click(function() {
          $("select").on("change", onchangeHandler);
        });
        //　コンボボックス値追加
        $("#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(onchangeHandler);
      });
      </script>
    </body>
[/code]


CC BY-SA 4.0
2018-07-21T04:57:21.317
46802
2018-07-21T04:57:21.317
46800
answer