Question

我对网络编程很陌生，我试图在单击前一个文本字段时简单地将文本字段添加到某个表单。 html页面将以一个字段开头，并将基于单击任何前一个字段而增加文本字段。这是通过客户端JavaScript。

然而，似乎代码不起作用，我没有到达任何地方。显示的所有内容都是由HTML管理的一个文本字段，而click事件正在输出任何内容。您现在可以忽略样式。

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

Answer 1

您可以使用以下方法替换整个解决方案：

$("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.

Answer 2

这一行：

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

会将ni设置为null，因为您没有任何ID为'area'的元素。当你试图说：

时，这意味着在函数的后期

ni.appendChild(newdiv);

它不起作用。

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

Answer 3

首先，您没有任何标识为area的标记，因此在尝试获取时会产生错误

我认为你这么做很难检查demo这比你做的更简单

需要帮助基于Click和JavaScript和JQuery创建表单元素

3 个答案: