stopPropagation предотвращает вызов функции обратного вызова успеха ajax

У меня есть кнопка внутри 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 не выполняется. Почему?