Edit does not work on jQuery

Question

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 search in my database the data according to the ID, until then, all right.. and insert it in the title field.

Then, change the button ID, 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 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 screen print:

HTML of the form:

<form id="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>