HTML入力が値を更新しない

Question

私は（私にとっては）非常に奇妙な問題があります。 ダイナミックにテキストボックスを作成しても問題ありません。しかし、問題は、私がHTMLコードをチェックすると、私が書いている値が現れないということです。なぜこれが起こっているのか、それをどのようにして動作させるのかはわかりません。 ここに私のコード例があります。

<ul class="ml4 js-sortable-buttons list flex flex-column list-reset" data-disabled="false" id="page-content"> 
    <li class="p1 mb1 blue bg-white" id="id"><input type="text" class="textbox" /></li> 
</ul> 
<div class="center py2 ml4"> 
    <div class="js-add-textbox-button button blue bg-white" >add textbox</div> 
    <div class="show_html_button blue bg-white">show html</div>      
</div> 


<!-- <script src="../src/html.sortable.js"></script> --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="html.sortable.min.js"></script> 
<script type="text/javascript"> 
     sortable('.js-sortable-buttons', { 
      forcePlaceholderSize: true, 
      items: 'li', 
      placeholderClass: 'border border-white mb1' 

     }); 
     // buttons to add items and reload the list 
     // separately to showcase issue without reload 
     document.querySelector('.js-add-textbox-button').addEventListener('click', function() { 
      doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white"><input type="text" class="textbox"></li>`, "text/html").body.firstChild; 
      document.querySelector('.js-sortable-buttons').appendChild(doc); 
      sortable('.js-sortable-buttons'); 
      window.stop(); 
     }); 
</script> 

    <script type="text/javascript"> 
     $(".show_html_button").click(function() { 
      var optionTexts = $("#page-content").clone(true); 
      alert(optionTexts.html()); 
     }); 
</script> 

ご協力いただければ幸いです。

Answer 1

これはJavaScriptの仕組みではありません。入力フィールドの値が変更されると、WebページのHTMLは自動的に更新されません。あなたは、このような機能が必要な場合は

、あなたはこれを行うことができます：

$(function(){ 
 
    $('.js-sortable-buttons').on('keyup change paste','input',function(){ 
 
    $(this).attr('value', $(this).val()); 
 
    }); 
 
});

Answer 2

あなたはhtml5Sortableへの参照が不足しています。 https://cdnjs.com/libraries/html5sortable

 sortable('.js-sortable-buttons', { 
 
      forcePlaceholderSize: true, 
 
      items: 'li', 
 
      placeholderClass: 'border border-white mb1' 
 

 
     }); 
 
     // buttons to add items and reload the list 
 
     // separately to showcase issue without reload 
 
     document.querySelector('.js-add-textbox-button').addEventListener('click', function() { 
 
      doc = new DOMParser().parseFromString(`<li class="p1 mb1 blue bg-white"><input type="text" class="textbox"></li>`, "text/html").body.firstChild; 
 
      document.querySelector('.js-sortable-buttons').appendChild(doc); 
 
      sortable('.js-sortable-buttons'); 
 
      window.stop(); 
 
     }); 
 

 
     $(".show_html_button").click(function() { 
 
      var optionTexts = $("#page-content").clone(true); 
 
      alert(optionTexts.html()); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5sortable/0.6.1/html.sortable.min.js"></script> 
 

 
<ul class="ml4 js-sortable-buttons list flex flex-column list-reset" data-disabled="false" id="page-content"> 
 
    <li class="p1 mb1 blue bg-white" id="id"><input type="text" class="textbox" /></li> 
 
</ul> 
 
<div class="center py2 ml4"> 
 
    <div class="js-add-textbox-button button blue bg-white" >add textbox</div> 
 
    <div class="show_html_button blue bg-white">show html</div>      
 
</div>