on('click') running more than once

Question

When I click on an area and then on the button. mais1 for the first time performs the function correctly but if I click one area then another and click the button . mais1 it performs the function twice, the function is executed the number of times I click on the element.

I could not identify the error, has anyone had this problem? Someone knows the solution?

 $("area").click(function(){         

    var escrever = '';
    var a = $(this).attr('class');
    var x = $.inArray(a,paises1);
    var clicado = x;

    t = ataques_possiveis[x].length;
    meus_territorios_tamanho = meus_territorios.length;

    if(opcao==2){

        for(w=0; w<meus_territorios_tamanho; w++){
            if(meus_territorios[w]==x){
                $(".selecione").html(paises2[x]);
            }
        }

        $('body').on('click','.distribuir .mais1',function(){

            if($('.selecione').text()!='Selecione'){
                var local = $(this).parent().parent().children('h2').text().replace(':','');
                var ter = $.inArray($(".selecione").text(),paises2);
                var pos_local = $.inArray(local,nomes_locais);

                for(var z=0; z<meus_territorios_tamanho; z++){
                    if(local==nomes_locais[0]){//verifica o tipo de exercito
                        if((meus_territorios[z]==x)&&(distribuir_locais[pos_local]>0)){
                            distribuir_locais[pos_local] = distribuir_locais[pos_local] -1;
                            exercitos[ter] = exercitos[ter]+1;
                            $('.'+ter).text(exercitos[ter]);
                            $(this).parent().parent().children('.dist_local').text(distribuir_locais[pos_local]);
                        }
                    }
                }
            }                                 
        });
    }
});

Answer 1

In fact it will occur every time the event click element area is clicked. It may be that the .mais1 is inside it, so it may seem like clicking on it, but not necessarily.

What you can do is take the creation of the .mais1 from within the click of area, since you are assigning the event to body same. If the functioning of the .mais1 depends on the click on area and that the variable opcao(which seems to me to be global) is equal to two, you can replicate the condition in the if within the event:

$('body').on('click','.distribuir .mais1',function() 
{
    if(opcao == 2 && $('.selecione').text()!='Selecione')

Another solution is to use the .off(), but I don’t recommend it because it would be a scam, but it would be useful if the rule were "click on .mais1 should only work after a click on area. It would work that way:

$('body').off('click','.distribuir .mais1').on('click','.distribuir .mais1')