需要帮助通过 JavaScript 和 JQuery 创建基于点击的表单元素答案

【问题标题】：Need Help Creating Form Elements Based On Click via JavaScript and JQuery需要帮助通过 JavaScript 和 JQuery 创建基于点击的表单元素
【发布时间】：2011-10-24 14:36:50
【问题描述】：

我对 Web 编程很陌生，我正在尝试根据单击前一个文本字段将文本字段简单地添加到某个表单。 html 页面将从一个字段开始，并会随着单击任何先前字段的文本字段一起增长。这是通过客户端 JavaScript 实现的。

但是，代码似乎无法正常工作，而且我无处可去。所显示的只是一个由 HTML 规范的文本字段，并且单击事件正在输出任何内容。您现在可以忽略样式。

<!DOCTYPE html>
<html>
<title>This is just a test</title>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
$(document).ready(function(){
var inival = 0;
function addTextBox()
{
    var newArea = add_New_Element();
    var htcontents = "<input type='text' name='textbx[]'/>";
    document.getElementById(newArea).innerHTML = htcontents; // You can any other elements in place of 'htcontents' 
}
function add_New_Element() 
{
inival=inival+1; // Increment element number by 1
var ni = document.getElementById('area');
var newdiv = document.createElement('div'); // Create dynamic element
var divIdName = 'my'+inival+'Div';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
return divIdName;
}
  $("input").click(function(){
    addTextBox();
  });
});
</script>
<body>
<div>
<form id="mainform" action="execute.php" method="post">
<input type="text" name="textbx[]"/>
</form>
</div>
</body>
</html>

【问题讨论】：

标签： javascript jquery forms input append

【解决方案1】：

这一行：

var ni = document.getElementById('area');

会将ni 设置为null，因为您没有任何ID 为“区域”的元素。这意味着当您尝试说时在函数的后面：

ni.appendChild(newdiv);

这行不通。

顺便说一句，你为什么要创建额外的 div 元素来保存新的输入？为什么不直接添加输入元素呢？

【讨论】：

【解决方案2】：

你可以用这个替换你的整个解决方案：

$("input").click(function() {
    $(this).after($(this).clone(true)); 
    $(this).after("<br />");
});

Demo.

我更喜欢使用.delegate，而不是克隆事件处理程序：

$("#myForm").delegate("input", "click", function() {
    $(this).after($(this).clone()); 
    $(this).after("<br />");
});

Demo.

【讨论】：

@user859434 - 不客气 :) 只是一件事，让您真正了解您的代码在哪里/为什么被破坏会更好（参见其他答案），而不是简单地用我发布的解决方案；你会从中受益匪浅。
哦，哇，我在引用 google 托管的 jquery 库时出错了……因此 jquery 事件不起作用。
只是另一个快速的问题，当我在这些字段上发送这些数据时，它们被发布到 execute.php （现在）只有“print_r($_POST["textbx[]"]) ;"为了打印出数组；但是，这不会打印任何内容。
@user859434 - 您只需要print_r($_POST["textbx"]); 即可访问 textbx 数组。

【解决方案3】：

首先你没有任何带有 id area 的标签，所以在尝试获取它时会产生错误

我认为你很难做到这一点检查这个demo它比你做的更简单

【讨论】：