如何使用jQuery插入字段？

Question

我想在代码片段中实现这段代码，目前我只在按钮标签上工作，所以当我点击这个按钮时，它添加了一个小的公式，允许在右侧创建这个标签通过点击确定。但是，即使我点击“确定”，也不会发生任何事情，通常情况下，标签应该以插入文本字段“标签”中的名称出现。

有谁知道问题在哪里？先谢谢你。

$(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'）。click（）在DOM改变时不会被更新，所以你必须自己做。

$(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(); 

});