Jquery 模式自动关闭

Question

我有这个jquery代码

$(document).ready(function () {
$('.btn.btn-primary.patientId').on('click',
            function (e) {
                var $this = $(e.target),
                    $tr = $this.closest("tr");
                var cid = $tr.find(".hdncid").eq(0).val();
                var search;
                    eLoader(true);
                loadUsers('/Companies/AssociateWithCaregiver', true);
    function loadUsers(url, addData) {
        $.get({
            url: url,
            data: addData ? { id: cid, search: search } : {}
        }).done(function (e) {
            eLoader(false);   
            $("#listOfCaregivers .modal-body").html(e);
            $('.btn.btn-primary.submit').click(function () {
                $("#searchForm").submit();
                search = $('#search').val();
                loadUsers('/Companies/AssociateWithCaregiver', true);
            });
            $('.btn.btn-primary.addcaregiver').click(function (b) {
                var $thiscaregiver = $(b.target),
                    $tr = $thiscaregiver.closest("tr");
                var caregiverid = $tr.find(".cgcid").eq(0).val();
                $.post("/Companies/Associate", { patientId: cid, caregiverId: caregiverid });
                $('.close').click();
            });
            $('.btn.btn-default.btn_delete.removecaregiver').click(function (b) {
                var $thiscaregiver = $(b.target),
                    $tr = $thiscaregiver.closest("tr");
                var caregiverid = $tr.find(".cgcid").eq(0).val();
                $.post("/Companies/AssociateRemove", { patientId: cid, caregiverId: caregiverid });
                $('.close').click();
            });
        }).fail(function (e) {
            eLoader(false);

按钮<form id="searchForm"> <div class="patientsearch" style="padding-left: 311px;"> <div class="input-group" style="width: 250px;"> @Html.TextBox("search", "", new { placeholder = "Search Caregivers", @class = "form-control" }) <span class="input-group-btn"> <button type="submit" class="btn btn-primary submit">Search</button> </span> </div> </div> </form>

问题是，当我打开模态窗口 - 获取数据并想要搜索时，我单击搜索(.btn.btn-primary.submit(，然后我收到了过滤后的数据，但在几秒钟内模态窗口自动关闭。在此之后，我可以看到地址栏我的链接 + ？搜索='我的搜索请求'。

我的代码出了什么问题？请帮帮我。谢谢。

Answer 1

单击按钮的默认行为将提交表单，这就是您的模态关闭和地址更改的原因。

有两种

方法可以解决此问题，您可以向按钮添加 type="button" 属性，也可以为表单添加侦听器并返回 false 以防止提交。

例如 $('#your_form').submit(function() { return false; });

Answer 2

您可以尝试e.preventDefault()在 ajax 请求保持模型打开之前阻止表单提交吗

$('.btn.btn-primary.submit').click(function (e) {
        e.preventDefault();
        //$("#searchForm").submit();
        search = $('#search').val();
        loadUsers('/Companies/AssociateWithCaregiver', true);
});