Update menu via ajax

Question

When I clicked on the menu item of my application it always updated the page, I am changing to update via ajax the pages however I am having difficulties in relation to functions with names based on the class event, example the delete function when I click is called the function of the previous page and the current page. Could you remove everything from the previous page? Example: I click on the city page and after clicking on the Parents page, the Open function loads the index, when I click on the delete button is called 2 times, and the city index is no longer being demonstrated.

function Open(url, descricao) {
       // event.preventDefault();
        url = '@Url.Content("~/")' + url;
        $.ajax({
            url: url,
            type: 'GET',
            success: function (response) {
                console.log("s");
                $('#principal').html($(response).find('#Conteudo2'));
                window.history.pushState("object or string", descricao, url);

            },
            error: function () {
                alert('Ocorreu um erro!');
            }
        });
    }
    
    $(document).on("click", ".btn-delete", function () {
            var link = $(this).attr("id");
            var removeItemEl = $(this);

            confirm("Você tem certeza que deseja excluir o pais registro?",

                function () {
                    $.ajax({
                        type: "POST",
                        url: "Pais/delete",
                        data: {
                            id: link
                        },
                        success: function (data) {
                            removeItemEl.closest("tr").remove();
                        },
                        error: function (data) {
                            alert("O País já foi utilizado, não é possível deletar o registro!");
                        }
                    })
                }

                , "Confirmação de exclusão");


        });

Answer 1

Since you are loading external pages that come with the same events that already exist, you can cancel current events before loading the new content using the method .off() jQuery.

You can cancel an event for a specific selector:

$(document).off("click", ".btn-delete");

Or you can cancel them all:

$(document).off();

More about the method .off() in official documentation.