Edit does not work in jQuery

I have the following function:

// ações para modificar (clique)
$(".editar").click(function(){
    var id = $(this).data("id");

    $.ajax ({
        url: 'area/get_area/'+id,
        type: 'GET',
        success: function(result){
            var arr = JSON.parse(result);
            $("#titulo").val(arr.are_titulo);
            $("#titulo").focus();
            $("#btn--cadastrar").text('Alterar Área');

            $('#cadastrar').removeClass("btn-danger");
            $('#cadastrar').addClass("btn-primary");

            // se caso houver campo criado, remove
            $('#are_id').remove();  

            // novo campo
            $('<input>').attr({
                type: 'hidden',
                id: 'are_id',
                name: 'are_id',
                value: id
            }).appendTo('form');    

            // modificando nome do botão 
            $("#cadastrar").attr("id","alterar");

            // retornando para o topo da pagina
            $('html, body').animate({scrollTop:0}, 'slow');
        }
    });
});

In this, I look in my database for the data according to the ID, until then, all right .. and I enter it in the title field.

Then change the ID of the button, so when you click change, call the change function (below):

// ações para editar
$("#alterar").click(function(){
    alert("area");
    var are_titulo = $('#titulo').val();
    var are_id = $('#are_id').val();
    var url_lista = 'area/listar';

    // No momento que o campo for preenchido, ocultamos o erro
    $("#titulo").keyup(function() {
        $("#retorno").hide("fade"); 
    });     

    if(are_titulo==''){
        $("#retorno").html("Você precisa digitar o título!"); 
        $("#retorno").show("fade");
        $("#titulo").focus();
    } else {
        $.ajax({
            url: 'area/alterar/'+id,
            type: 'POST',
            data: {are_titulo:are_titulo, are_id:are_id},
            success: function(data){
                $('#listagem').html("<div style='padding: 20px'><center><img src='assets/images/loading_anim.gif'></center></div>");
                setTimeout(function(){
                    $('#listagem').load(url_lista);
                    $("#titulo").focus();
                },2000);                    
            }
        });
    }
}); 

The case is, that when I click on change, it calls the primary function and not the edit function. That is, it adds a new record in the database.

To get an idea, follow the print on the screen:

HTMLoftheform:

<formid="form--cadastrar">
    <!-- topo-bloco-fim -->
    <div class="col-sm-12">
        <div class="form-group">
            <label class="control-label">Nome da Área</label>
            <input type="text" name="titulo" id="titulo" class="form-control" placeholder="Nome da Área" />
            <div id="retorno" class="admin-retorno"></div>
        </div>
        <!-- form-group -->
    </div>
    <!-- col-sm-6 -->
    <div class="pull-right col-sm-4">
        <button type="button" class="btn btn-danger btn-block btn-create-msg" id="cadastrar">
            <div id="btn--cadastrar">Cadastrar Área</div>
        </button>
    </div>
</form>