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以阻止提交。

e.g $('#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);
});

Jquery模态自动关闭

2 个答案: