Question

对不起我的英语，我很有限。我只会说英语并使用谷歌转录。

我遇到了jQuery developpement的问题。项目的想法是动态创建一个表单。所以HTML就是它的复合体：

// On attend que le DOM Soit chargé
$(document).ready(function() { // équivalent de $(function() {}); 
	// au clic bouton Label
	$( "button:first" ).on( "click", function() {
		// On Crée les nouveaux éléments
		$('<hr/>').appendTo('#button');
		$('<span>Nom du label : </span>').appendTo('#button');
		$('<input type="text" id="label">').appendTo('#button');
		$('<button id="labelValidation">ok</button>').appendTo('#button');
		// au clic sur le bouton ok
		$('button#labelValidation').on("click", function() {
			var inputLabel = $(':text[id="label"]').val();
			$('<span>'+inputLabel+'</span>').appendTo('#gaucheForm');
		});
			/* $('hr').hide();
			$('span').hide();
			$('input').hide();
			$('#labelValidation').hide(); */
		
	});

	// au clic bouton zone de texte
	$( "button:nth-child(2)" ).on( "click", function() {
		// On Crée les nouveaux éléments
		$('<hr/>').appendTo('#button');
		$('<span>id de la zone de texte : </span>').appendTo('#button');
		$('<input type="text" id="texte">').appendTo('#button');
		$('<button id="idValidation">ok</button>').appendTo('#button');
		// au clic sur le bouton ok
		$('button#idValidation').on("click", function() {
			var inputTexte = $(':text[id="texte"]').val();
			$('<input type="texte" id='+inputTexte+'>').appendTo('#gaucheForm');
		});
	});

	// au clic bouton Label
	$( "button:nth-child(3)" ).on( "click", function() {
		// On Crée les nouveaux éléments
		$('<hr/>').appendTo('#button');
		$('<span>Texte du bouton : </span>').appendTo('#button');
		$('<input type="text" id="bouton">').appendTo('#button');
		$('<button id="btnValidation">ok</button>').appendTo('#button');
		// au clic sur le bouton ok
		$('button#btnValidation').on("click", function() {
			var inputBouton = $(':text[id="bouton"]').val();
			$('<button>'+inputBouton+'</button>').appendTo('#gaucheForm');
		});
	});

});

html,body{
	height: 100%;
}
body {
	margin: 0;
}
#gauche {
	float: left;
	width:50%;
	min-height: 100%;
	background-color: #6CC9B2;
}
#droite {
	background-color: #57B8C9;
	min-height: 100%;
	padding : 10px;
	float: right;
	width: 45%;
}
button{
	background-color: #218D8D;
	border: none;
	padding: 10px;
	border-radius: 5px;
	color: white;
	margin-right: 10px;
	margin-bottom: 10px;
	min-width: 60px; 
}
button:hover{
	background-color: #125C5C;
}
input{
	margin: 10px 10px 10px 0;
}
span{
	margin-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Générateur de formulaire</title>
	<!-- Bootstrap -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!--css-->
	<link rel="stylesheet" href="css/styles.css">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
   	<div class="container">
   		<h1>Votre formulaire</h1>
   	</div>
    <div class="container" id="gauche">
    	<div class="row">
    		<div class="col-xs-12" id="gaucheForm">
          
        </div>
    	</div>
   	</div>
   	<div class="container" id="droite">
   		<div class="row">
   			<div class="col-xs-12">
   				<h3>Utilisez ces boutons pour créer votre formulaire</h3>
   			</div>
   			<div class="col-xs-12" id="button">
   				<button>Label</button>
   				<button>Zone de texte</button>
   				<button>Bouton</button>
   			</div>
   		</div>
   	</div>
   	<!-- jQuery -->
   	<script src="script/jquery.js"></script>
   	<!-- script -->
   	<script src="script/script.js"></script>
</body>
</html>

我的问题是：

我不发送左div中的输入内容并删除之前动态创建的项目（hr，span，input，button）。我可以输入内容，也可以删除项目。谢谢你的帮助

编辑：

解决方案是：

// au clic bouton Label
$( "button:first" ).on( "click", function() {
    // On Crée les nouveaux éléments
    $('<div id="creation">').appendTo('#button');
    $('<hr/>').appendTo('#creation');
    $('<span>Nom du label : </span>').appendTo('#creation');
    $('<input type="text" id="label">').appendTo('#creation');
    $('<button id="labelValidation">ok</button>').appendTo('#creation');
    // au clic sur le bouton ok
    $('button#labelValidation').on("click", function() {
        var inputLabel = $(':text[id="label"]').val();
        $('<span>'+inputLabel+'</span>').appendTo('#gaucheForm');
        $("#creation").remove();
    });
});

需要帮助轻松开发jQuery

0 个答案: