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阻止显示引导程序的对话框

1 个答案: