Question

嗨，我对jquery相对较新并且遇到了一些困难。过去几个小时我一直在研究这个问题。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>
<body>

<form id = "params">
Type: <input id = "type" type = "text">
Parameters:<input type = "text">
Required: <input type = "checkbox" >
<button id = "addpa">Add Parameter</button>
<script>
$("#addpa").click(function() {
        $("#params").append("Parameters:<input type = \"text\"><br>Required: <input type = \"checkbox\" >");
});
</script>

</form>
</body>
</html>

我想要做的是让用户命名他们正在创建的项目类型。之后他们可以输入参数列表。因为每个＆＃34;类型＆＃34;将有不同数量的参数，我希望他们能够点击按钮，并有机会添加一组新的输入。当我点击按钮时，输入显示然后消失......

Answer 1

问题似乎在于您提交表单。尝试将其更改为div。

<div id = "params">
    Type: <input id = "type" type = "text" />
    Parameters:<input type = "text" />
    Required: <input type = "checkbox" />
    <button id = "addpa">Add Parameter</button>
</div>


$("#addpa").click(function() {
        $("#params").append("Parameters:<input type = \"text\" /><br>Required: <input type = \"checkbox\" >");
});

demo

Answer 2

你几乎得到了它。只需从表单中取出按钮和脚本标签，然后将它们放在底部，如下所示：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

    </head>
    <body>

        <form id = "params">
            Type: <input id = "type" type = "text">
            Parameters:<input type = "text">
            Required: <input type = "checkbox" >
        </form>
        <button id = "addpa">Add Parameter</button>
        <script>
            $("#addpa").click(function() {
                $("#params").append("Parameters:<input type = \"text\"><br>Required: <input type = \"checkbox\" >");
            });
        </script>


    </body>
</html>

jquery附加按钮单击显示文本然后消失

2 个答案: