javascript - 如何使用 jQuery 插入字段？

Question

我试图在片段中实现这段代码，目前我只处理按钮标签，所以当我点击这个按钮时，它会添加一个小公式，允许在单击右侧的“确定”。但是，即使我单击“确定”也没有任何反应，通常应该出现一个标签，其中的名称插入到文本字段“标签”中。

谁知道问题出在哪里？提前谢谢你。

$(function(){
	$('button').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');
		};
		if(typeButton=='OK'){
		    $('hr').remove();
			var elementNom = $('input[name=label]').val();
			var elementSpan = '<span>'+elementNom+'</span>';
			$('#formule').remove();
			$('#gauche').append('elementSpan');
		};
	});
});

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 事件处理程序附件来委托(delegate)动态添加的元素。

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