63592


項目「選択肢」をクリックし、選択肢を編集し（もしくは編集せずに）、blur()したのち、もとの状態(テキストの状態）にしたのですが、`select`のままになってしまいます。  
項目「用途」のように、クリック→blur()→元の状態（テキスト）にできたのですが、  
同じように、要素が`select`や`radio`のときはどのようにしたらよいのでしょうか？

ご教授いただけますと大変助かります。

[code]

    $(function() {
      $('.input_edit').click(function() {
        if(!$(this).hasClass('on')) {
          $(this).addClass('on');
          var txt = $(this).text();
          $(this).html('<input type="text" class="form-control" value="'+txt+'" />');
          $('.input_edit > input').focus().blur(function() {
            var inputVal = $(this).val();
            if(inputVal==='') {
              inputVal = this.defaultValue;
            };
            $(this).parent().removeClass('on').text(inputVal);
          });
        };
      });
    });
    
    $(function() {
      $('.input_edit_select').click(function() {
        if(!$(this).hasClass('on')) {
          $(this).addClass('on');
          var txt = $(this).text();
          $(this).html('<select class="form-control"><option selected>A</option><option>B</option><option>C</option></select>');
          $('.input_edit_radio > input').focus().blur(function() {
            var inputVal = $(this).val();
            if(inputVal==='') {
              inputVal = this.defaultValue;
            };
            $(this).parent().removeClass('on').text(inputVal);
          });
        };
      });
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="box-body">
       <table class="table">
        <thead>
           <tr>
            <th>用途</th>
            <th>選択肢</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="input_edit">テスト</td>
            <td class="input_edit_select">A</td>
          </tr>
         </tbody>
       </table>
     </div>
[/code]


CC BY-SA 4.0
2020-03-05T07:00:44.417
63590
2020-03-05T07:14:45.170
35901
question
javascript jquery
項目「選択肢」をクリックで編集しblur()後、もとの状態に戻す方法を教えてください。


イベントを設定しているところですが

[code]

    .input_edit_radio > input
    
[/code]

と書いていますがclass名がradioではないですし、タグもinputではなくてselectなので

[code]

    .input_edit_select > select
    
[/code]

と記述する必要があります。

[code]

    $(function() {
      $('.input_edit').click(function() {
        if(!$(this).hasClass('on')) {
          $(this).addClass('on');
          var txt = $(this).text();
          $(this).html('<input type="text" class="form-control" value="'+txt+'" />');
          $('.input_edit > input').focus().blur(function() {
            var inputVal = $(this).val();
            if(inputVal==='') {
              inputVal = this.defaultValue;
            };
            $(this).parent().removeClass('on').text(inputVal);
          });
        };
      });
    });
    
    $(function() {
      $('.input_edit_select').click(function() {
        if(!$(this).hasClass('on')) {
          $(this).addClass('on');
          var txt = $(this).text();
          $(this).html('<select class="form-control"><option selected>A</option><option>B</option><option>C</option></select>');
          $('.input_edit_select > select').focus().blur(function() {
            var inputVal = $(this).val();
            if(inputVal==='') {
              inputVal = this.defaultValue;
            };
            $(this).parent().removeClass('on').text(inputVal);
          });
        };
      });
    });
[/code]

[code]

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="box-body">
       <table class="table">
        <thead>
           <tr>
            <th>用途</th>
            <th>選択肢</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="input_edit">テスト</td>
            <td class="input_edit_select">A</td>
          </tr>
         </tbody>
       </table>
     </div>
[/code]


CC BY-SA 4.0
2020-03-05T07:14:45.170
63592
2020-03-05T07:14:45.170
22665
63590
answer