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

原文 标签 javascript jquery html css

我正尝试在代码段中实现此代码,此刻我仅在按钮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>

最佳答案

您需要使用文档的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);
        };
    });

关于javascript - 如何使用jQuery插入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38547521/

相关文章:

javascript - 如何使用模块化JavaScript模式创建单独的对象

html - 在PHP/HTML中对齐信息

javascript - 如何将类或ID添加到Ext.Msg.alert框中

javascript - Plupload 问题 - 正在使用 {Filename}.part 上传文件且未触发 FileUploadedevent

javascript - 将 Canvas 分为几块

javascript - jQuery之前无法使用html克隆()和appendTo()

html - DIV无法对齐,被压低到内容下方

java - 如何在jsp中获取ID而不是值?

javascript - 选择元素时找不到数据ID

javascript - JQuery PreventDefault 和 IE8 澄清