Montana Montana - 1 year ago 54
HTML Question

Duplicate input when adding

The idea of the script is that it adds sections and text boxes to them. If I add one section and adds input to it, everything plays. However, when I add the other one - in one of them the prompt is duplicated and I can not get why, I put code to check what I mean.



$("#add_section").on("click", function() {

var sectionid = $(".sekcja").length;
$("#sectionid").val(sectionid);
var sectionwidth = prompt("Section width");
$("#sectionwidth").val(sectionwidth);
var sectionheight = prompt("Section height");
$("#sectionheight").val(sectionheight);
var bg = prompt("Section background color");
$("#bg").val(bg);
var sectioncolor = prompt("Section font color");
$("#sectioncolor").val(sectioncolor);
$("#new_section").append('<div class="section" style="width: '+ sectionwidth +'px; min-height: '+ sectionheight +'px; background: #'+ bg +'; color: #'+ sectioncolor +';"><button type="button" class="add_text">Add text</button></div>');
$(".add_text").on("click", function() {

var inputid = $('.sample').length;
$("#inputid").val(inputid);
var inputwidth = prompt("Width text area");
$("#inputwidth").val(inputwidth);
$(this).parent().append('<input type="text" class="sample" style="width: '+ inputwidth +'px;" placeholder="Sample text..." name="sample['+inputid+']"/>');

});

if ($(".section").length > 0) {
$("#default-section").css("display","none");
}

if(sectionwidth < 1050) {
$(".section").css("float","left");
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_section">
<div id="default-section">Default</div>
</div>

<div style="clear: both;"></div>

<button type="button" id="add_section">Add section</button>




Answer Source

One way is you can add a id like @Pete answer

If you don't want to add id then move $(".add_text").on("click") outside and bind it with #new_section. See below code:

Move $(".add_text").on("click", function() ); outside and

$("#add_section").on("click", function() {
			
			var sectionid = $(".sekcja").length;
			$("#sectionid").val(sectionid);
			var sectionwidth = prompt("Section width");
			$("#sectionwidth").val(sectionwidth);
			var sectionheight = prompt("Section height");
			$("#sectionheight").val(sectionheight);
			var bg = prompt("Section background color");
			$("#bg").val(bg);
			var sectioncolor = prompt("Section font color");
			$("#sectioncolor").val(sectioncolor);
			$("#new_section").append('<div class="section" style="width: '+ sectionwidth +'px; min-height: '+ sectionheight +'px; background: #'+ bg +'; color: #'+ sectioncolor +';"><button type="button" class="add_text">Add text</button></div>');
			

			if ($(".section").length > 0) {
				$("#default-section").css("display","none");	
			}

			if(sectionwidth < 1050) {
				$(".section").css("float","left");	
			}

});

$("#new_section").on("click", ".add_text", function() {
				
	var inputid = $('.sample').length;
	$("#inputid").val(inputid);
	var inputwidth = prompt("Width text area");
	$("#inputwidth").val(inputwidth);
	$(this).parent().append('<input type="text" class="sample" style="width: '+ inputwidth +'px;" placeholder="Sample text..." name="sample['+inputid+']"/>');
				
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new_section">
<div id="default-section">Default</div>
</div>

<div style="clear: both;"></div>

<button type="button" id="add_section">Add section</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download