stopPropagation阻止显示引导对话框 [英] stopPropagation prevents bootstrap's dialog to be shown

问题描述

我在div内有一个按钮

I have a button inside a div

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

A 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函数:

and a jquery functions which run on-click event:

    $("[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函数(不希望的影响).

now, obviously, when I click the button the the #outerDiv function is called too (undesirable affect).

当我这样放置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);
});

然后，不会出现模式对话框. 为什么?

then the modal dialogue does not appear. why?

推荐答案

这是预期的行为.通过使用stopPropagation，您基本上是在说不会再将有关该事件的点击事件处理程序通知给您，就像您可以在

That's the expected behavior. By using stopPropagation you are basically saying that no more click event handlers will be notified of that event like you can read in the documentation. You can however trigger the modal manually using: $("#showRequestModal").modal('show');

这篇关于stopPropagation阻止显示引导对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！