j查询克隆表单在同一页面中不起作用两次
jQuery clone form not working twice in the same page
我正在尝试在同一页面中两次使用相同的表单,表单工作一次但不是两次,我认为问题出在 id 或其他方面,但我不确定我不太擅长 JavaScript
感谢帮助。
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
$('#btnAdd').click(function () {
var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
// H2 - section
newElem.find('.heading-reference').attr('id', 'ID' + newNum + '_reference').attr('name', 'ID' + newNum + '_reference').html('Entry #' + newNum);
// Title - select
newElem.find('.label_ttl').attr('for', 'ID' + newNum + '_title');
newElem.find('.select_ttl').attr('id', 'ID' + newNum + '_title').attr('name', 'ID' + newNum + '_title').val('');
// First name - text
newElem.find('.label_fn').attr('for', 'ID' + newNum + '_first_name');
newElem.find('.input_fn').attr('id', 'ID' + newNum + '_first_name').attr('name', 'ID' + newNum + '_first_name').val('');
// Insert the new element after the last "duplicatable" input field
$('#entry' + num).after(newElem);
$('#ID' + newNum + '_title').focus();
// Enable the "remove" button. This only shows once you have a duplicated section.
$('#btnDel').attr('disabled', false);
// Right now you can only add 4 sections, for a total of 5. Change '5' below to the max number of sections you want to allow.
if (newNum == 5)
$('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit"); // value here updates the text in the 'add' button when the limit is reached
});
$('#btnDel').click(function () {
// Confirmation dialog box. Works on all desktop browsers and iPhone.
if (confirm("Are you sure you wish to remove this section? This cannot be undone."))
{
var num = $('.clonedInput').length;
// how many "duplicatable" input fields we currently have
$('#entry' + num).slideUp('slow', function () {$(this).remove();
// if only one element remains, disable the "remove" button
if (num -1 === 1)
$('#btnDel').attr('disabled', true);
// enable the "add" button
$('#btnAdd').attr('disabled', false).prop('value', "add section");});
}
return false; // Removes the last section you added
});
// Enable the "add" button
$('#btnAdd').attr('disabled', false);
// Disable the "remove" button
$('#btnDel').attr('disabled', true);
});
</script>
</head>
<body>
<div id="wrapper">
<div class="sign-up_box">
<form action="#" method="post" id="sign-up_area">
<div id="entry1" class="clonedInput">
<h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
<fieldset>
<label class="label_ln" for="last_name">Last name:</label>
<input class="input_ln" type="text" name="last_name" id="last_name" value="">
</fieldset>
</div><!-- end #entry1 -->
<div id="addDelButtons">
<input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
</div>
<fieldset class="form-actions">
<input type="submit" value="Submit">
</fieldset>
</form>
</div><!-- end sign-up_box -->
</div>
<div id="wrapper">
<div class="sign-up_box">
<form action="#" method="post" id="sign-up_area">
<div id="entry1" class="clonedInput">
<h2 id="reference" name="reference" class="heading-reference">Entry #1</h2>
<fieldset>
<label class="label_ln" for="last_name">Last name:</label>
<input class="input_ln" type="text" name="last_name" id="last_name" value="">
</fieldset>
</div><!-- end #entry1 -->
<div id="addDelButtons">
<input type="button" id="btnAdd" value="add section"> <input type="button" id="btnDel" value="remove section above">
</div>
<fieldset class="form-actions">
<input type="submit" value="Submit">
</fieldset>
</form>
</div><!-- end sign-up_box -->
</div>
</body>
</html>
Id 标签在 HTML 文档中必须是唯一的,否则它们将无法正常工作。您可能希望使用"class"而不是"id",并使用jQuery类选择器来选择适当的字段,具体取决于您要执行的操作。
以下是一些与此相关的现有StackOverflow问题:
在多个 HTML 标记中使用相同的 ID?
具有相同 ID 的多个元素响应一个 CSS ID 选择器
JavaScript 重复 ID 冲突
您不能简单地克隆具有 id 属性的元素。任何单个页面上都不能有两个具有相同 id 的元素。因此,请相应地更改克隆元素的 ids,以及在代码中对它们的引用。
相关文章:
- 删除确认对话框在第一次单击时不起作用
- 更改第二次推送时不起作用的元素高度
- java脚本中的谷歌地图在第二次点击时不起作用
- 两个层次的手风琴除了第一次不起作用
- 在页面中使用了两次多个图像上传,但第一个正在工作,另一个不起作用
- 函数jQuery.animation()运行了两次行,但不起作用
- j查询克隆表单在同一页面中不起作用两次
- 引导轮播不起作用(一次显示所有图像)
- 获取最接近的 Div 的 ID 两次不起作用
- Jquery 滑块不起作用多次调用
- JS运行两次不起作用
- 使用 strophe attach() 而不是 connect() 不起作用,除非我两次触发我的连接回调
- 加载页面两次或更多次时,Tinymce不起作用
- 使用两次正前瞻在 .Net 1.1 上不起作用
- Javascript启动函数两次,4个函数中的1个不起作用
- 两次验证之间的角度过滤器不起作用
- Parameters .replace()两次jQuery插件不起作用
- window.open两次不起作用(第二个窗口没有出现)-Blocker解决方法
- 两次返回似乎不起作用
- 当我单击两次时,css3 转换不起作用