stopPropagation可以防止调用ajax成功回调函数

Question

我在div中有一个按钮

<div id="outerDiv">
    <button data-details-rid="@Model.RequestId">Details</button>
</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);
});

然后不执行ajax成功函数。 为什么呢？