How to restart the Jquery events, to avoid the repetition of each one of them?

I have an index page that contains the following events.

<div id="sub_page"></div>
$(document).ready(function () {

        $("a.menu_navegacion_abrircaja").on('click', function (ev) {
            ev.preventDefault();
            var href = “nombrecontrollerEJ/view_ej";
            $.post(href, function (data) {
                        $("#sub_page").html(data);
                    });
        });       

});

In it, when you click, load the html contents of subpages in the div sub_page. In view view view_ej, I bring html code and also, jquery code. The Jquery code of the view that is added to the index div is as follows:

$(document).ready(function () {

$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
        alert("hello");
    });
});

By clicking on the link that contains the class "menu_navegacion_abrircaja", I get the alert ("hello"); But it turns out that there is a problem, for every time I click on the link, the alert messages are repeated (alert ("hello");). For example, the first time I click on the link that contains the class menu_navegacion_abrircaja, it works fine showing the alert once, but then I click again on the same link it shows me the alert twice, then I do it for the third time, He shows me three times the alert, and so on.

I would like to know how to solve this problem. Will there be any way to restart the events or handler of the jquery, as are the events click, change, "hidden.bs.modal", etc., in such a way that their repetition of the events is avoided?

I have seen the methods unbind (), bind (), off (), which might be the solution, but if so, how could you apply them?

Maybe you could try something like this in the jQuery code of your subpage:

$(document).ready(function () {
  $('#modal_establecer_turnos').off('hidden.bs.modal');
  $('#modal_establecer_turnos').on('hidden.bs.modal', function () {
    alert(“hello”);
  });
});