Javascript JQuery克隆（）问题。一个简单的克隆代码块的程序运行异常_Javascript_Jquery_Html_Css

Javascript JQuery克隆（）问题。一个简单的克隆代码块的程序运行异常

javascript jquery html css

Javascript JQuery克隆（）问题。一个简单的克隆代码块的程序运行异常,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我是这个领域的初学者。我创建了一个HTML页面，单击一些“+”/“-”按钮，我分别从Multiple.js文件中调用add（）和remove（），以添加或删除HTML页面中的代码块。但我得到了意想不到的结果。文件如下：多组选择.html <!DOCTYPE HTML > <HTML> <HEAD> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> &

我是这个领域的初学者。我创建了一个HTML页面，单击一些“+”/“-”按钮，我分别从Multiple.js文件中调用add（）和remove（），以添加或删除HTML页面中的代码块。但我得到了意想不到的结果。文件如下：多组选择.html

<!DOCTYPE HTML >
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="style.css">
<TITLE>Multiple Group Selections</TITLE>
<script src="Multiple.js" type="text/javascript"></script>
</HEAD>
<BODY BGCOLOR="#FDF5E6">
<H2 ALIGN="CENTER">Multiple Group Selections</H2>
<div id="clonedInput1" class="clonedInput">
<FIELDSET class="field">
<LEGEND ALIGN="RIGHT">
<button type="button" class = "clone" onclick={add();}  >+</button>
<button type="button" class = "remove" onclick={remove();}>-</button>
</LEGEND>
Field 2A: <INPUT TYPE="TEXT" NAME="field2A" VALUE="Field A"><BR>
Field 2B: <INPUT TYPE="TEXT" NAME="field2B" VALUE="Field B"><BR>
Field 2C: <INPUT TYPE="TEXT" NAME="field2C" VALUE="Field C"><BR>
</FIELDSET>
</div>
</BODY>
</HTML>

style.css

 .clone {
 font-family: Verdana, Arial, Helvetica, sans-serif; 
 font-size: 12px;  
 font-weight: bold; 
 color: #00ffff;
 Background-COLOR: white;
 border: black;
 border-style: solid;
 border-width: 1px;
 }
.remove{
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #00ffff;
Background-COLOR: white;
border: black;
border-style: solid;
border-width: 1px;
}

我所需要的只是单击“+”按钮，必须将其附加到。单击“-”按钮时，也应将其删除。请帮帮我。我已经筋疲力尽了。

您肯定会误入歧途的一个地方是尝试将内联

onclick

处理程序与不引人注目的jquery单击处理程序混合使用。尤其是当它们都是同一元素的单击处理程序时。如果您刚刚开始使用jQuery，那么最好的方法是根本不使用任何内联javascript

阅读

add（）

函数时，必须单击add按钮，然后创建一个jQuery clcik处理程序。。。但是单击已经发生，因此处理程序不会第一次触发

剥离内联的

onclick

并展开

add（）

和

remove（）

函数，将标记中的所有javascript都去掉，使其更易于理解

演示：

注意：字段集应该在表单标记中，标记中没有表单标记。

我简化了克隆元素并添加新的动态

id的函数
$('#btnclone').on('click', function() {
    var lastid = $('[id^="clonedInput"]').length + 1;
    $(".clonedInput")
        .last()
        .clone()
        .attr('id', 'clonedInput' + lastid)
        .appendTo("body")
    $('input').each(function() {
        $(this).val('PARENT DIV ID =  ' + $(this).parent().attr('id'))
    })
})

在这里测试：
在JSFIDLE上创建一个演示。对于回答这个问题的人来说，net是一个JSFIDLE。编号方案是不可持续的。只需从顶部删除元素并添加更多元素，就可以引入重复ID。@Asad确实提出了我也考虑过的一个好观点。当你删除一行时，你的ID索引可能会被复制。请不要把它当作个人问题，但与我的回答不同，你的ID会被复制，这是不应该发生的。在这里，我更新了您的代码以显示：@RASG明白了，我觉得花时间向JS新手解释他们的方法偏离了轨道是很重要的。简单地提供代码并不总是有助于教学。最好的答案并不总是关于代码，因为他使用的是regex和一个JS库，所以我没有意识到他是JS新手。但你是对的。解释正在发生的事情比仅仅展示代码并期望他理解更重要。我的错误。
$('#btnclone').on('click', function() {
    var lastid = $('[id^="clonedInput"]').length + 1;
    $(".clonedInput")
        .last()
        .clone()
        .attr('id', 'clonedInput' + lastid)
        .appendTo("body")
    $('input').each(function() {
        $(this).val('PARENT DIV ID =  ' + $(this).parent().attr('id'))
    })
})