Call the jQuery event not working

Question

I have a button on which adds some components on the screen (input, drop down etc...), via jQuery manipulation. Among these components two buttons, respectively one of "Save" and the other of "Cancel".

$('#show-destination').click(function () {

       $('.ms-selection ul.ms-list li').each(function() {
            if ($(this).hasClass('ms-selected')) {              
                $('#negotiation-status').prepend('<h5 id="destination-title"> <b>Destino: </b>' + $(this).text()+'</h5>');

                $('#destination-title').after('<div id="div-departure" class="box01"></div>');
                $('#div-departure').append('<div id="div-input-departure" class="input-group "></div');
                $('#div-input-departure').append('<span id="span-departure" class="input-group-addon btn-success"><i class="fa fa-calendar"></i></span>');
                $('#span-departure').after('<input id="input-departure" type="text" name="customerService.destinationRequested.departureDate" class="form-control" placeholder="Data de Ida"/>');

                $('#div-departure').after('<div id="div-arrive" class="box02"></div>');
                $('#div-arrive').append('<div id="div-input-arrive" class="input-group "></div');
                $('#div-input-arrive').append('<span id="span-arrive" class="input-group-addon btn-success"><i class="fa fa-calendar"></i></span>');
                $('#span-arrive').after('<input id="input-arrive" type="text" name="customerService.destinationRequested.arriveDate" class="form-control" placeholder="Data de Volta"/>');

                //Valor e Tipo
                $('#div-arrive').after('<div id="div-sale-type" class="box01"></div>');
                $('#div-sale-type').append('<select id="combo-saleType" name="" class="form-control"></select>');


                $('#div-sale-type').after('<div id="input-div" class="box02"></div>');
                $('#input-div').append('<div id="acme" class="input-group "></div>');
                $('#acme').append('<span id="span-batatinhya" class="input-group-addon btn-success"><i class="fa fa-money"></i></span>');
                $('#span-batatinhya').after('<input id="input-price" type="text" name="customerService.destinationRequested.price" class="form-control"/>');


                //Botoes que são adicionados
                $('#input-div').after('<div id="div-button" class="box03"></div>');
                $('#div-button').append('<button id="button-add-destination" type="button" class="btn btn-info pull-right"><span class="entypo-plus-squared"></span>&nbsp;&nbsp;Adicionar</button>');
                $('#button-add-destination').before('<button id="button-cancel-destination" type="button" class="btn btn-danger pull-right"><span class="entypo-cancel-squared"></span>&nbsp;&nbsp;Cancelar</button>');

            }
          });      
   });

Well, the problem is that these buttons trigger an AJAX request which in case does not work. That is, my button #button-add-destinatio calls the function:

   $('#button-add-destination').click(function (){
       var departure =  $('#input-departure').val();
       var arrive = $('#input-arrive').val();
       var ckb = $('#ckb-label').val();
       var price = $('#input-price').val();
       var saleType = $('#ckb-saleType').val();

       $.ajax({
        type:'POST',
        dataType: 'html',
        data: "departure="+departure+"&"+"arrive="+arrive+"price"+price+"saleType"+saleType+"ckb"+ckb,
        url:'/viatge/auth/addSelectedDestination?${_csrf.parameterName}=${_csrf.token}',
        sucess: function(result){
            alert("Destino adcionado com sucesso!");
        },
        error: function(error){
            alert(error);
        }
       })
   });

But the call does not occur! What happens?

Answer 1

João, the button that you have the listner is also inserted at runtime, so when you enter the DOM, the command Jquery of has already been executed. click, which does not find it, and therefore does nothing.

What you should do is take some element that is already in the DOM, that is not inserted by ajax, like HTML, for example, but is better for some more specific parent that is closer, and put the listner 'on', example:

 $('html').on('click', '#button-add-destination', function (){
alert('hello!');
})

It may be that the mistake is another, but it seems to me that it can work.