Question

我正在开展一个项目，我的工作是创建一个基本的Web数据输入表单。我的所有语法都完全正常，除了现在我需要在页面上有一个超链接，点击时添加一个标签和文本框。

我的问题：

使用一些JavaScript应该很简单，但无论出于何种原因，我的语法都没有添加任何东西？
为了点击Add Additional Child链接时我需要做什么，它会添加一个新的文本框和标签？

我的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>

Answer 1

更新2：

将事件处理程序分配更改为动态，就像您要删除的那样：

https://jsfiddle.net/5n6du1qt/2/

  $(document).on('click', '#newChild', 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();
  });

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

这是因为你需要在dom准备好之后移动脚本以在加载事件后调用。

请在此处查看工作小提琴：https://jsfiddle.net/5n6du1qt/

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

//<![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();
});
}//]]>

<强>更新以下是该脚本的另一个变体：https://jsfiddle.net/5n6du1qt/1/

$(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();
  });
})

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

1 个答案: