Javascript jQuery和Ajax在$上不起作用

我希望当我点击清除按钮时，表单中的所有字段都被清除。 ajax请求只是将表单从标记

替换为

。 单击“清除”按钮时，控制台输出正在工作

我有以下表格：

<div class="col-lg-5 formWrapper">
    <form data-th-fragment="layoutForm" id="layoutForm" class="form-horizontal" data-th-object="${layout}" data-th-action="@{/layouts/add}" method="POST" role="form">
        <div class="row">
            <input id="objectId" data-th-field="*{id}" type="hidden">
            <input data-th-if="*{filePath} !=null" data-th-field="*{filePath}" type="text" hidden="hidden">
            <label for="layoutName" >Layout name</label>
            <input data-th-field="*{name}" id="layoutName" class="form-control" type="text">
        </div>
        <div class="row">
            <div class="col-lg-4">
                <label for="status">Status</label>
                <select id="status" data-th-field="*{status}"class="form-control">
                    <option value="1">Active</option>
                    <option value="0">Blocked</option>
                </select>
            </div>
            <div class="col-lg-6">
                <label for="exhibitorName">Exhibitor</label>
                <select data-th-field="*{exhibitor}" name="exhibitorName"  id="exhibitorName" class="form-control">
                    <option data-th-each="exhibitor : ${exhibitorsList}" data-th-value="${exhibitor.id}" data-th-text="${exhibitor.exhibitorName}"></option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class=" col-lg-3">
                <input id="clearForm" type="reset" value="Clear" class="form-control btn-lg btn btn-default">
            </div>
            <div class=" col-lg-3 col-lg-offset-4">
                <input id="submitButton" type="submit" value="Add" class="form-control btn-lg btn btn-success">
            </div>
        </div>
    </form>
</div>

剪下的是我如何替换表单：

$("body").on('click','#editLayout', function(event){
    var ajax = $.ajax({
        url : "/layouts/edit/" + $(this).data("id"),
        dataType : "html",
        success: function (data) {
            $("#layoutForm").replaceWith(data);
            $('#submitButton').val('Edit').addClass('btn-warning').removeClass('btn-success');
        }
    });
});

尝试使用$（'#clearForm'）.reset（）；或$（'#clearForm'）[0].reset（）

试试这个

$('#form_id').trigger("reset");

或

重置按钮根本不需要任何脚本（或名称或id）：

你完成了。但如果确实必须使用脚本，请注意每个表单控件都有一个引用其所在表单的表单属性，因此可以执行以下操作：

<input type="button" onclick="this.form.reset();">

---

但是重置按钮是一个更好的选择。

为什么不直接使用

？不需要JS，因为它仍然不起作用。它仅在Ajax请求之前起作用。然后提供一个工作代码段。您能否提供如何在Ajax调用中替换

.formWrapper

的详细信息。因此，使用

.replaceWith

，您正在替换

.formWrapper

-因此您以前的

$（“.formWrapper”）。on（…

不再像

那样工作。formWrapper

已被替换。请选择更高的内容或替换formWrapper的内容，而不是formWrapper本身。我已尝试了每种方法，但它会重置除布局名称以外的所有内容：）值仍然相同…仅当它位于ajax之前时有效：）在我调用ajax之后，并且字段已填充，但不起作用。请尝试以下操作：$（'input[type=“text]”，texatrea，select'，this.val（“”）；other wise$（'form#layoutForm input[type=“text”]，texatrea，select'）.val（“”）；谢谢，它可以与$（'form#layoutForm input[type=“text”]，texatrea，select'）.val（''）：）

$('#form_id')[0].reset();

<input type="reset">

<input type="button" onclick="this.form.reset();">