Calling the jQuery event not working [duplicate]

Navigation
0

I have a button in which I add some components on the screen (input, drop down etc ...), via jQuery manipulation. Among these components two buttons, respectively one of "Save" and one 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 that does not work in the case. That is, my #button-add-destinatio button 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 happen! What happens?

    
asked by anonymous 30.10.2014 / 20:26

1 answer

4

John, the button that you have the listner is also inserted at runtime, when you enter it into the DOM, the Jquery command for .click is not running, so it does not do anything.

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

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

It may be that the error is another, but it seems to me that this may work.

    
30.10.2014 / 22:05
Why does the application stop if the field is left empty? Is it possible to call function other than onclick? [closed]