Question

我有一个模式，当点击提交时会做一个ajax帖子，但是现在我想要选择关闭模态，但是当我点击'关闭'时它仍然会执行ajax帖子。单击“关闭”按钮时，我不想做ajax帖子。我不知道如何处理这种情况。

模态

<div id="ModelView" class="modal hide fade" data-backdrop="static">
    <div class="modal-header">
        <button id="close" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Add Session</h3>
    </div>
    <div class="modal-body">
        <input type="hidden" id="rateId" />
        <table class="table">
            <tr>
                <td>Client</td>
                <td>
                    <select id="clientSelect">
                    </select>
                </td>
            </tr>
            <tr>
                <td>Lessons</td>
                <td>
                    <select id="SelectLessonCounter">
                        <option value="1">1</option>
                        <option value="1.5">1.5</option>
                        <option value="2">2</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>From</td>
                <td>
                    <div class="input-append bootstrap-timepicker-component">
                        <input id="from" size="16" type="text" readonly="true" />
                        <span class="add-on">
                            <i class="icon-time"></i>
                        </span>
                    </div>

                </td>
            </tr>
            <tr>
                <td>Till</td>
                <td>
                    <div class="input-append bootstrap-timepicker-component">
                        <input id="till" size="16" type="text" readonly="true" />
                        <span class="add-on">
                            <i class="icon-time"></i>
                        </span>
                    </div>

                </td>

            </tr>
            <tr>
                <td>Subject</td>
                <td>
                    <select id="subjectSelect">
                    </select>
                </td>
            </tr>
            <tr>
                <td>Type</td>
                <td>
                    <select id="typeSelect">
                        <option value="<%# (int)Genius.Models.Enums.RateType.Tutoring %>">Tutoring </option>
                        <option value="<%# (int)Genius.Models.Enums.RateType.Couching %>">Couching </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input id="dontCount" type="checkbox" />
                    Don't Count
                </td>
            </tr>
        </table>
    </div>
    <div class="modal-footer">
        <a id="btnDoneEdit" href="#" data-dismiss="modal" class="btn btn-success">Done</a>
    </div>
</div>

Ajax Post

$("#ModelView").modal("show").on("hidden", function (a, b, c) {

                    if (a.target.localName != 'div')
                        return;

                    var d = {
                        id: 0,
                        SubjectId: $("#subjectSelect").val(),
                        ClientId: $("#clientSelect").val(),
                        From: f + " " + $("#from").val(),
                        Till: f + " " + $("#till").val(),
                        DontCount: $("#dontCount").is(":checked"),
                        Type: $("#typeSelect").val(),
                        LessonCounter: $("#SelectLessonCounter").val()
                    }


                    $.ajax({
                        type: "POST",
                        url: "Api/UpdateTimeTable.ashx",
                        data: JSON.stringify(d),
                        success: function (response, status, xhr) {
                            var ct = xhr.getResponseHeader("content-type") || "";
                            if (ct.indexOf('json') > -1) {
                                window.location = window.location;
                            }
                            if (ct.indexOf('text') > -1) {
                                alert(response);
                                window.location = window.location;
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert("There seems to be a problem. " + errorThrown);
                        }
                    });

                });

Answer 1

不要将ajax调用绑定到on（'hidden'）事件，而是绑定到提交按钮上的click事件。

[UPDATE] （我不知道模态插件，但它应该是这样的：）

$("#ModelView").modal("show");

             /*EDIT*/ 
            $(document).on( "click", '#btnDoneEdit', function(e){
              e.preventDefault();
            /*EDIT end */


                var d = {
                    id: 0,
                    SubjectId: $("#subjectSelect").val(),
                    ClientId: $("#clientSelect").val(),
                    From: f + " " + $("#from").val(),
                    Till: f + " " + $("#till").val(),
                    DontCount: $("#dontCount").is(":checked"),
                    Type: $("#typeSelect").val(),
                    LessonCounter: $("#SelectLessonCounter").val()
                }


                $.ajax({
                    type: "POST",
                    url: "Api/UpdateTimeTable.ashx",
                    data: JSON.stringify(d),
                    success: function (response, status, xhr) {
                        var ct = xhr.getResponseHeader("content-type") || "";
                        if (ct.indexOf('json') > -1) {
                            window.location = window.location;
                        }
                        if (ct.indexOf('text') > -1) {
                            alert(response);
                            window.location = window.location;
                        }
                    $("#ModelView").modal("hide");

                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("There seems to be a problem. " + errorThrown);
                    }
                }); 


            });

Answer 2

然后你应该为ajax帖子创建一个自己的函数，并将它从按钮绑定到onclick事件：

<input type="Button" value="Done" onclick="ajaxCall()" />

...

function ajaxCall()
{
$.ajax({...)};
}

Answer 3

我已经修复了我的模态，我稍微更改了我的jquery，它现在运行正常。

$("#ModelView").modal("show").on(
    //$(document).on("click", '#btnDoneEdit', function (e) {
    $('#btnDoneEdit').click(function (e) {
                        // e.preventDefault();
                        alert("Hi");
                        //if (a.target.localName != 'div')
                        //    return;

                        var d = {
                            id: 0,
                            SubjectId: $("#subjectSelect").val(),
                            ClientId: $("#clientSelect").val(),
                            From: f + " " + $("#from").val(),
                            Till: f + " " + $("#till").val(),
                            DontCount: $("#dontCount").is(":checked"),
                            Type: $("#typeSelect").val(),
                            LessonCounter: $("#SelectLessonCounter").val()
                        }

                        $.ajax({
                            type: "POST",
                            url: "Api/UpdateTimeTable.ashx",
                            data: JSON.stringify(d),
                            success: function (response, status, xhr) {
                                var ct = xhr.getResponseHeader("content-type") || "";
                                if (ct.indexOf('json') > -1) {
                                    window.location = window.location;
                                }
                                if (ct.indexOf('text') > -1) {
                                    alert(response);
                                    window.location = window.location;
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert("There seems to be a problem. " + errorThrown);
                            }
                        });

                    })
                );

关闭按钮单击模态时，Ajax POST会触发

3 个答案: