stopPropagation 阻止显示 bootstrap 的对话框

Question

我在 div

中有一个按钮

<div id="outerDiv">
    <button data-details-rid="@Model.RequestId" data-toggle="modal" data-target="#showRequestModal">Details</button>
</div>

一个bootstrap的模态对话框

   <div id="showRequestModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div id="request-details-title">Details</div>
                </div>
                <div id="request-details-modal-body" class="modal-body">
                </div>
            </div>
        </div>
    </div>

和一个 jquery 功能运行单击事件：

    $("[data-details-rid]").on('click', function (event) {
        var request_id = $(this).attr('data-details-rid');
        console.log(request_id);
        var request_details = {};
        request_details.url = "/Requests/Details?RequestId=" + request_id;
        request_details.async = false;
        request_details.datatype = "html";
        request_details.contentType = "application/json; charset=utf-8";
        request_details.success = function (request_info) {/*...*/};
        $.ajax(request_details);
    });

$("#outerDiv").on('click', function (event) {
    another ajax call
});

现在，显然，当我单击按钮时，也会调用 #outerDiv 函数（不良影响）。

当我这样输入 event.stopPropagation() 时：

$("[data-details-rid]").on('click', function (event) {
    event.stopPropagation();
    var request_id = $(this).attr('data-details-rid');
    console.log(request_id);
    var request_details = {};
    request_details.url = "/Requests/Details?RequestId=" + request_id;
    request_details.async = false;
    request_details.datatype = "html";
    request_details.contentType = "application/json; charset=utf-8";
    request_details.success = function (request_info) {/*...*/};
    $.ajax(request_details);
});

然后模态对话就不会出现了。为什么？

Answer 1

这是预期的行为。通过使用 stopPropagation，您基本上是在说不会像您在 documentation 中看到的那样通知更多的点击事件处理程序。但是，您可以使用以下方法手动触发模式： $("#showRequestModal").modal('show');

stopPropagation 阻止显示 bootstrap 的对话框

stopPropagation prevents bootstrap's dialog to be shown

jquery

stoppropagation

bootstrap-modal