jquery - モーダルで閉じるボタンをクリックするとAjax POSTが起動する

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>

アヤックスポスト

$("#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') イベントにバインドするのではなく、送信ボタンのクリック イベントにバインドします。

[更新] (モーダルプラグインはわかりませんが、次のようなものになるはずです:)

$("#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);
                    }
                }); 


            });