Question

我有一个带有两个按钮的模态。一个是“是”按钮，一个是“否”按钮。如果按“是”按钮，我希望其余功能执行。如果未单击btn，我希望页面阻止默认设置并且不执行。但是，似乎无论单击哪个按钮，除了模式关闭之外什么都没有发生。我正在使用在其他地方找到的模式示例，所以这可能是问题所在。看了一段时间后，我似乎找不到问题所在。我想念一些小东西吗？还是我的Jquery错误？下面是我的代码：

模式：

    <!-- Modal for delete-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content border-primary mb-3 box-shadow-none img-responsive">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="card-body bg-light">
                <div id="del" class="center">
                    <label>Are you sure you want to delete?</label>
                </div>
            </div>
            <div class="modal-footer">
                <div id="deleteYes">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="deleteYes">Yes</button>
                </div>
                <div id="deleteNo">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="deleteNo">No</button>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的Jquery：

 $(".btnDeleteTerminalCommand").click(function (e) {

    $("#deleteModal").modal('toggle');

    if ($("#deleteNo").click) {
        return e.preventDefault();
    }

    var rowId = "#" + $(this).data("rowindex");
    var row = $(rowId);
    var termId = row.find(".tdTermId").html().trim();
    var cmdId = row.find(".tdCmdId").html().trim();
    var cmdVal = row.find(".tdCmdVal").html().trim();
    var cmdID = row.find(".cmdID").html().trim();

    var data = {
        TerminalID: termId,
        CommandID: cmdId,
        CommandValue: cmdVal,
        ID: cmdID
    };

    $.ajax({
        url: '@Url.Action("DeleteTerminalCommand", "TerminalCommand")',
        type: "POST",
        data: data,
        success: function (response) {
            console.log("Success");
            window.location.href = response.Url;
        }
    });
});

任何建议都可以帮助您！谢谢！

Answer 1

您的单击处理程序将切换模式，并立即继续执行其余功能，然后用户才能单击任何内容。如果您的模式有两个按钮，则为每个按钮创建一个单击处理程序。也许“否”按钮只是关闭模式。是按钮处理程序可以执行完成任务所需的操作。

$(".btnDeleteTerminalCommand").click(function(e){
    $("#deleteModal").modal('toggle');
}

$("#deleteNo").click(function(e){
    $("#deleteModal").modal('hide');
}

$("#deleteYes").click(function(e){
    // build data object
    // ajax post
}

Modal不会关闭并阻止默认情况下的无点击操作，并且不会在yes单击时执行func

1 个答案: