jQueryを使用してフィールドを挿入する方法は？

Question

私はこのコードをスニペットで実現しようとしていますが、今はボタンのラベルだけで作業していますので、このボタンをクリックすると、右のラベルを作成することができる小さな形式が追加されますOKをクリックしてください。ただし、[OK]をクリックしても何も起こりません。通常、ラベルはテキストフィールド "label"に名前が挿入された状態で表示されます。

問題がどこにあるか知りませんか？前もって感謝します。

$(function(){ 
 
\t $('button').click(function(){ 
 
\t \t var typeButton = $(this).text(); 
 
\t \t if(typeButton=='Label'){ 
 
\t \t \t $('hr').remove(); 
 
\t \t \t $('#formule').remove(); 
 
\t \t \t $('#droite').append('<hr>'); 
 
\t \t \t var elementLabel = 'Texte du label'; 
 
\t \t \t var elementTexte = '<input type="text" name="label"/>'; 
 
\t \t \t var elementButton = '<button>OK</button>'; 
 
\t \t \t var elementSpan = elementLabel+' '+elementTexte+' '+elementButton; 
 
\t \t \t var elementDiv = '<div id="formule">'+elementSpan+'</div>' 
 
\t \t \t $(elementDiv).insertAfter('hr'); 
 
\t \t }; 
 
\t \t if(typeButton=='OK'){ 
 
\t \t  $('hr').remove(); 
 
\t \t \t var elementNom = $('input[name=label]').val(); 
 
\t \t \t var elementSpan = '<span>'+elementNom+'</span>'; 
 
\t \t \t $('#formule').remove(); 
 
\t \t \t $('#gauche').append('elementSpan'); 
 
\t \t }; 
 
\t }); 
 
});

body { 
 
     margin: 0; 
 
     } 
 
     #gauche { 
 
     float: left; 
 
     width: 70%; 
 
     height: 1000px; 
 
     background-color: #EFECCA; 
 
     } 
 
     #droite { 
 
     background-color: #CEFFF8; 
 
     height: 1000px; 
 
     padding : 10px; 
 
     padding-left: 71%; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div id="gauche"> 
 
</div> 
 
<div id="droite"> 
 
     Utilisez ces boutons pour créer votre formulaire<br><br> 
 
     <button>Label</button> 
 
     <button>Zone de texte</button> 
 
     <button>Bouton</button> 
 
</div>

Answer 1

あなたは、ドキュメントとonイベントハンドラのアタッチメントを使用して動的に追加要素を委任する必要があります。

$(document).on('click', 'button', function() { 
     var typeButton = $(this).text(); 
     if (typeButton == 'Label') { 
      $('hr').remove(); 
      $('#formule').remove(); 
      $('#droite').append('<hr>'); 
      var elementLabel = 'Texte du label'; 
      var elementTexte = '<input type="text" name="label"/>'; 
      var elementButton = '<button>OK</button>'; 
      var elementSpan = elementLabel + ' ' + elementTexte + ' ' + elementButton; 
      var elementDiv = '<div id="formule">' + elementSpan + '</div>' 
      $(elementDiv).insertAfter('hr'); 
     }; 
     if (typeButton == 'OK') { 
      $('hr').remove(); 
      var elementNom = $('input[name=label]').val(); 
      var elementSpan = '<span>' + elementNom + '</span>'; 
      $('#formule').remove(); 
      $('#gauche').append(elementSpan); 
     }; 
    }); 

Answer 2

DOM（OK）に生成されますボタンはそれに接続されているイベントリスナを持っていないので、それはですので、押されているとき、それは何の関係もありません。 $（ 'button'）DOMが変更されるたびにclick（）は更新されないため、あなた自身で行う必要があります。

$(function() { 
    function listenToButtons() { 
    $('button').off().on('click', function() { 
     var typeButton = $(this).text(); 
     if (typeButton == 'Label') { 
     $('hr').remove(); 
     $('#formule').remove(); 
     $('#droite').append('<hr>'); 
     var elementLabel = 'Texte du label'; 
     var elementTexte = '<input type="text" name="label"/>'; 
     var elementButton = '<button>OK</button>'; 
     var elementSpan = elementLabel + ' ' + elementTexte + ' ' + elementButton; 
     var elementDiv = '<div id="formule">' + elementSpan + '</div>' 
     $(elementDiv).insertAfter('hr'); 
     listenToButtons(); 
     }; 
     if (typeButton == 'OK') { 
     $('hr').remove(); 
     var elementNom = $('input[name=label]').val(); 
     var elementSpan = '<span>' + elementNom + '</span>'; 
     $('#formule').remove(); 
     $('#gauche').append('elementSpan'); 
     }; 
    }); 
    } 
    listenToButtons(); 

});