Question

我正在尝试在代码段中实现此代码，目前我只在按钮标签上工作，所以当我点击此按钮时，它会添加一个小的公式，允许在此创建一个标签右键单击确定。但是，即使我单击确定也没有任何反应，通常会出现一个标签，并在文本字段“label”中插入名称。

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

$(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 事件处理程序附件为文档委派动态添加的元素。

$(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更改时不会更新，因此您必须自己完成。

index + 1

如何使用jQuery插入字段？

2 个答案: