添加时重复输入
问题描述：
该脚本的构思是它为它们添加了部分和文本框。如果我添加一个部分并添加输入，则所有内容都会播放。但是，当我添加另一个 - 在其中一个提示重复，我不明白为什么，我把代码来检查我的意思。添加时重复输入
$("#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>
答
一种方法是你可以添加一个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>+1
你的方法是最简单也可能是最有效的方法。作品，谢谢老兄：D – Montana
答
的问题是在这条线：
$(".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() {
...
答
好了，问题是，你的$(".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代替。希望这可以帮助！ :)
它看起来像一个'click'事件处理程序附加到'.add_text'按钮（一个或多个）每有人点击时“添加部分”按钮。你应该从部分点击处理程序中移除（“click”，function（）{...}'部分的'$（“。add_text”）。 – matov