Question

脚本的想法是它向它们添加部分和文本框。如果我添加一个部分并为其添加输入，则所有内容都会播放。但是，当我添加另一个 - 其中一个提示重复，我不明白为什么，我把代码检查我的意思。

$("#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 1

问题在于这一行：

$(".add_text").on("click", function() {

每次点击＆＃34; #add_section＆＃34;，您都会将 另一个 点击事件处理程序添加到 每个元素 ，其中包含＆＃34; add_text＆＃34;分配给它的类。

我建议您为上面一行创建的按钮生成唯一ID，并使用该ID分配点击事件处理程序。

例如：

var id = "cmd_" + Math.floor(Math.random() * 99999);
$("#new_section").append('<div class="section" style="width: '+ sectionwidth +'px; min-height: '+ sectionheight +'px; background: #'+ bg +'; color: #'+ sectioncolor +';"><button type="button" id="' + id + '" class="add_text">Add text</button></div>');
$("#"+id).on("click", function() {
  ...

Answer 2

一种方法是添加id @Pete答案

如果您不想添加id，请将$(".add_text").on("click")移到外面并将其与#new_section绑定。见下面的代码：

将$(".add_text").on("click", function() );移到外面并

＆＃13;

$("#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+']"/>');
				
});

＆＃13;

<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>

＆＃13;

Answer 3

好的，问题是你的$(".add_text").on("click"事件会被页面上出现的类.add_text的每个元素触发，这意味着你已经添加的输入字段越多，就越多事件被解雇了。解决方案是绑定和解除绑定事件处理程序。检查以下代码：

$("#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').unbind('click', addTextHandler);
			$('.add_text').bind('click', addTextHandler);

			if ($(".section").length > 0) {
				$("#default-section").css("display","none");	
			}

			if(sectionwidth < 1050) {
				$(".section").css("float","left");	
			}

		});

var addTextHandler = 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>

我已将处理程序逻辑移动到单独的函数，然后我绑定并取消绑定.add_class。希望这可以帮助！：）

添加时重复输入

3 个答案: