Call the jQuery event not working

Asked

Viewed 1,134 times

0

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?

javascript jquery html

  • How do you know the call doesn’t occur? The $('#button-add-destination').click(function (){ is run? That date should be an object...

  • ever looked at your console? throws some exception?

  • Simply by the fact that when I am debugging it does not enter the method. The date it picks up directly on the component. No exceptions!

  • One strange thing is that if I leave the button fixed on my DOM tree then the function is triggered. Only it doesn’t work when jQuery mounts the structure.

  • What do you mean by "I leave the button fixed"? It is removed and put back into the DOM?

  • @Sergio, if I put it "in hand" on the screen it calls the click function, but if I leave it the way I put it above (the jQuery rendering dynamically) does not work.

  • @Sergio, unfortunately it didn’t work either.

  • @Joãomanolo can create an example in jsFiddle that reproduces the problem? Without it you can’t test.

  • And see on the page if the URL is correct here: '/viatge/auth/addSelectedDestination?${_csrf.parameterName}=${_csrf.token}', when it comes to the client’s side

  • Yes @Sergio. I think it is clearer to view. I have already put the link. With regard to the AJAX call is all ok. The problem and trigger the event, thing that doesn’t even happen with prayer...

  • Here it is: http://jsfiddle.net/joaoManolo/6fLj3cdg/

Show 6 more comments

1 answer

4


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.

  • Yes it worked @Luiz Rossi, now everything became clearer. It will help me a lot, because I have enough manipulation of DOM to do. Thanks for the strength

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.