Question

我正在尝试构建一个克隆插件，并从他们在W3C上使用的简单示例开始。起初，当我尝试它时，我会看到页面上的数据闪烁并消失。我在控制台中没有看到任何错误，我在JS小提琴中使用它并且在告诉我使用＆＃34; post＆＃34;时出错，所以我将一个post方法添加到表单标签中并且仍然得到相同的结果。

然而，当我拿走表单标签时，克隆工作了。有人理解为什么会这样吗？

这是HTML

<body>
    <fieldset id="question01">
        <input type="text" id="ques_01_text" placeholder="text01" name="ques_01" />
        <input type="text" id="ques_02_text" placeholder="text02" name="ques_02" />
        <input type="text" id="ques_03_text" placeholder="text03" name="ques_03" />
    </fieldset>

    <button>add</button>
</body>

这里是Jquery

$(document).ready(function () {
    $("button").click(function () {
        $("#question01").clone().appendTo("body");
    });
});

Answer 1

如果表单中有按钮，默认情况下它将充当submit按钮。也就是说，当你有这个时：

<button>add</button>

它实际上被解释为：

<button type='submit'>add</button>

有关详细信息，请参阅此处：what's the standard behavior when < button > tag click? will it submit the form?

因此，当您单击它时，无论您的点击事件如何，它仍然会提交您不想要的表单。这就解释了为什么当你没有表格时它会起作用;没有什么可以提交的，所以提交动作是惰性的。要使按钮不提交，您只需将其类型更改为button

<button type='button'>add</button>

然后当它在表单中时，单击它时不会自动提交。

Answer 2

您的表单正在提交中。如果您不希望您提交表单，请指定该按钮只是一个“按钮”而不是“提交按钮”......就像这样：

<button type="button">Add</button>

而不是

<button type="submit">Add</button>

Answer 3

试试这个：

$($('#question01').get(0).cloneNode(true)).appendTo('body')

当存在html5表单标记时，JQuery .clone（）不起作用

3 个答案: