javascript - 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)，然后收到过滤后的数据，但几秒钟后模态窗口自动关闭。之后我可以看到 地址栏我的链接 + ?search='我的搜索请求'。

我的代码有什么问题吗？请帮帮我。 谢谢。

Answer 1

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

有两种方法可以解决此问题，您可以向按钮添加 type="button" 属性，或者为表单添加监听器并返回 false 以阻止提交。

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