添加時重複輸入

Question

該腳本的構思是它爲它們添加了部分和文本框。如果我添加一個部分並添加輸入，則所有內容都會播放。但是，當我添加另一個 - 在其中一個提示重複，我不明白爲什麼，我把代碼來檢查我的意思。

$("#add_section").on("click", function() { 
 
\t \t \t 
 
\t \t \t var sectionid = $(".sekcja").length; 
 
\t \t \t $("#sectionid").val(sectionid); 
 
\t \t \t var sectionwidth = prompt("Section width"); 
 
\t \t \t $("#sectionwidth").val(sectionwidth); 
 
\t \t \t var sectionheight = prompt("Section height"); 
 
\t \t \t $("#sectionheight").val(sectionheight); 
 
\t \t \t var bg = prompt("Section background color"); 
 
\t \t \t $("#bg").val(bg); 
 
\t \t \t var sectioncolor = prompt("Section font color"); 
 
\t \t \t $("#sectioncolor").val(sectioncolor); 
 
\t \t \t $("#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>'); 
 
\t \t \t $(".add_text").on("click", function() { 
 
\t \t \t \t 
 
\t \t \t \t var inputid = $('.sample').length; 
 
\t \t \t \t $("#inputid").val(inputid); 
 
\t \t \t \t var inputwidth = prompt("Width text area"); 
 
\t \t \t \t $("#inputwidth").val(inputwidth); 
 
\t \t \t \t $(this).parent().append('<input type="text" class="sample" style="width: '+ inputwidth +'px;" placeholder="Sample text..." name="sample['+inputid+']"/>'); 
 
\t \t \t \t 
 
\t \t \t }); 
 

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

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

 
\t \t });

<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

一種方法是你可以添加一個id像@Pete答案

如果你不希望添加id然後向外移動的$(".add_text").on("click")與#new_section綁定。請參見下面的代碼：外

移動$(".add_text").on("click", function());和

$("#add_section").on("click", function() { 
 
\t \t \t 
 
\t \t \t var sectionid = $(".sekcja").length; 
 
\t \t \t $("#sectionid").val(sectionid); 
 
\t \t \t var sectionwidth = prompt("Section width"); 
 
\t \t \t $("#sectionwidth").val(sectionwidth); 
 
\t \t \t var sectionheight = prompt("Section height"); 
 
\t \t \t $("#sectionheight").val(sectionheight); 
 
\t \t \t var bg = prompt("Section background color"); 
 
\t \t \t $("#bg").val(bg); 
 
\t \t \t var sectioncolor = prompt("Section font color"); 
 
\t \t \t $("#sectioncolor").val(sectioncolor); 
 
\t \t \t $("#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>'); 
 
\t \t \t 
 

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

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

 
}); 
 

 
$("#new_section").on("click", ".add_text", function() { 
 
\t \t \t \t 
 
\t var inputid = $('.sample').length; 
 
\t $("#inputid").val(inputid); 
 
\t var inputwidth = prompt("Width text area"); 
 
\t $("#inputwidth").val(inputwidth); 
 
\t $(this).parent().append('<input type="text" class="sample" style="width: '+ inputwidth +'px;" placeholder="Sample text..." name="sample['+inputid+']"/>'); 
 
\t \t \t \t 
 
});

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

的問題是在這條線：

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

每次點擊 「#add_section」 的時候，你要添加另一點擊事件處理每個元素表示具有「 add_text「類分配給它。

我建議你爲上面的行上創建的按鈕生成一個唯一的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 3

好了，問題是，你的$(".add_text").on("click"事件被炒魷魚與.add_text類中的每個元素出現在頁面上，這意味着你已經添加了更多的輸入領域，更該事件被解僱的時間。解決方案是綁定和解除綁定事件處理程序。檢查下面的代碼：

$("#add_section").on("click", function() { 
 
\t \t \t 
 
\t \t \t var sectionid = $(".sekcja").length; 
 
\t \t \t $("#sectionid").val(sectionid); 
 
\t \t \t var sectionwidth = prompt("Section width"); 
 
\t \t \t $("#sectionwidth").val(sectionwidth); 
 
\t \t \t var sectionheight = prompt("Section height"); 
 
\t \t \t $("#sectionheight").val(sectionheight); 
 
\t \t \t var bg = prompt("Section background color"); 
 
\t \t \t $("#bg").val(bg); 
 
\t \t \t var sectioncolor = prompt("Section font color"); 
 
\t \t \t $("#sectioncolor").val(sectioncolor); 
 
\t \t \t $("#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>'); 
 
\t \t \t $('.add_text').unbind('click', addTextHandler); 
 
\t \t \t $('.add_text').bind('click', addTextHandler); 
 

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

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

 
\t \t }); 
 

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

<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代替。希望這可以幫助！ :)