Javascript 从超链接中添加文本框和标签单击_Javascript_Php_Jquery_Html

Javascript 从超链接中添加文本框和标签单击

javascript php jquery html

Javascript 从超链接中添加文本框和标签单击,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我正在从事一个项目，我的工作是创建一个基本的web数据输入表单。我有所有的语法功能完全一样，除了现在我需要有一个超链接的页面上，当点击添加标签和文本框我的问题是: 使用一些JavaScript应该足够简单，但是出于任何原因，我的语法没有添加任何内容单击添加其他子项链接将添加新的文本框和标签时，我需要做什么 Myindex.php： <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/

我正在从事一个项目，我的工作是创建一个基本的web数据输入表单。我有所有的语法功能完全一样，除了现在我需要有一个超链接的页面上，当点击添加标签和文本框

我的问题是:

使用一些JavaScript应该足够简单，但是出于任何原因，我的语法没有添加任何内容

单击

添加其他子项

链接将添加新的文本框和标签时，我需要做什么

index.php

：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
$("#newChild").on('click', function() {
  $('#ChildInfo').after(
    '<div id="ChildInfo">' +
    '<td><label for="lblChildName">Child Name: </label></td>' +
    '<td class="style1"><input  type="text" name="txtChildName" maxlength="100" size="30"></td>' +
    '<a href="#" id="removeChild"> remove Child</a>' +
    '</div>'
  );
});
$(document).on('click', '#rmChild', function() {
  $(this).closest('#ChildInfo').remove();
});
</script>
</head>
<body>
<div id="BasicInfo">
    <table>
        <tr>
            <td><label for="lblParent">Parent Name:</label></td>
            <td class="style1"><input type="text" name="txtparentname" maxlength="500" size="30"></td>
        </tr>
        <tr>
            <td><label for="lblPhone">Contact Number:</label></td>
            <td class="style1"><input type="text" name="txtphone" maxlength="500" size="30"></td>
        </tr>
    </table>
</div>
<div id="ChildInfo">
   <label for="lblChildName">Child Name:</label>
   <input  type="text" name="txtChildName" maxlength="100" size="30">
    <br><br><br>
   <a href="#" id="newChild">Add Additional Child</a>
</div>
</body>
</html>


$（“#newChild”）。在（'click'，function（）上{
$（“#ChildInfo”）。之后(
'' +
'子名称：'+
'' +
'' +
''
);
});
$（文档）。在（'click'，'#rmChild'，函数（）上{
$（this）.closest（“#ChildInfo”）.remove（）；
});
父项名称：
联络电话：
子名称：

更新2：

将事件处理程序分配更改为动态，就像您正在删除：

$（文档）.on（'click'，'newChild'，function（）{
$（“#ChildInfo”）。之后(
'' +
'子名称：'+
'' +
'' +
''
);
});
$（文档）。在（'click'，'#rmChild'，函数（）上{
$（this）.closest（“#ChildInfo”）.remove（）；
});

--------------其他方式---------------------

这是因为一旦dom就绪，您需要移动脚本以在加载事件后调用

请看这里的工作小提琴：

您可以尝试将脚本更改为：

//<![CDATA[
window.onload=function(){
$("#newChild").on('click', function() {
  $('#ChildInfo').after(
    '<div id="ChildInfo">' +
    '<td><label for="lblChildName">Child Name: </label></td>' +
    '<td class="style1"><input  type="text" name="txtChildName" maxlength="100" size="30"></td>' +
    '<a href="#" id="removeChild"> remove Child</a>' +
    '</div>'
  );
});
$(document).on('click', '#rmChild', function() {
  $(this).closest('#ChildInfo').remove();
});
}//]]>

//

更新： 以下是脚本的另一个变体：

$（函数（）{
$（“#newChild”）。在（'click'，function（）上{
$（“#ChildInfo”）。之后(
'' +
'子名称：'+
'' +
'' +
''
);
});
$（文档）。在（'click'，'#rmChild'，函数（）上{
$（this）.closest（“#ChildInfo”）.remove（）；
});
})

不要使用

窗口。onload=

-它将替换任何现有的onload处理程序。由于您已经在使用jQuery，请使用

$（document）.ready（function（）{…}）

元素中。我也提到了其他选择。最简单的方法是“打开”动态附加它。啊-现在语法正常工作了，有没有办法确保“添加其他子项”文本始终保持在新添加的标签/文本框的下方？以前可能使用的方法会对您有所帮助$（“#ChildInfo”）.before（您的）.after（“”…
）将是一个问题。页面中的id
必须是唯一的。无论如何，您的ChildInfo看起来更像一个类。每个添加的输入都将具有name=“txtChildName”
这也可能是一个问题。具有相同名称的多个控件将发送一个值数组，而不是多个名称：值对。良好的UI还表示执行操作的对象应该是按钮，而不是链接。@StephenP-我甚至没有想到这一点。本质上意味着每次添加新控件时，都会覆盖该值理想情况下，我希望名称为txtChildName、txtChildName1、txtChildName2等。我还应该限制允许添加的数量…对于输入name=
可以重复它…这取决于您的情况和服务器希望提交的内容。您可以保留一个计数器var entryCount=0，在您的单击处理程序中递增它，并将它附加到名称中，给出“txtChildName1”、“txtChildName2”等。这正是您需要注意的。@StephenP-谢谢您提醒我注意，如果我可以投票的话，您会得到它的！
//<![CDATA[
window.onload=function(){
$("#newChild").on('click', function() {
  $('#ChildInfo').after(
    '<div id="ChildInfo">' +
    '<td><label for="lblChildName">Child Name: </label></td>' +
    '<td class="style1"><input  type="text" name="txtChildName" maxlength="100" size="30"></td>' +
    '<a href="#" id="removeChild"> remove Child</a>' +
    '</div>'
  );
});
$(document).on('click', '#rmChild', function() {
  $(this).closest('#ChildInfo').remove();
});
}//]]> 

$(function(){
  $("#newChild").on('click', function() {
    $('#ChildInfo').after(
      '<div id="ChildInfo">' +
      '<td><label for="lblChildName">Child Name: </label></td>' +
      '<td class="style1"><input  type="text" name="txtChildName" maxlength="100" size="30"></td>' +
      '<a href="#" id="removeChild"> remove Child</a>' +
      '</div>'
    );
  });
  $(document).on('click', '#rmChild', function() {
    $(this).closest('#ChildInfo').remove();
  });
})