Open dynamic button modal pressed via ajax

Question

I’m having trouble opening a modal by means of a button dynamically pressed via ajax.

The following jquery code below opens the modal normally, considering that the button to be clicked was not dynamically loaded.

$('#idDivModal5').on('click', '.btn-cancelar-contrato', function(){   

// codigo aqui 

});

Once I generated the buttons via ajax, sending them to my result div, the buttons no longer worked.

HTML code:

<div id=resultado></div>

Includes the result div in jquery as shown below, but it didn’t work:

$('#resultado#idDivModal5').on('click', '.btn-cancelar-contrato', function()    
{   

// codigo aqui 

});

Below is the current code:

 $('[data-load-remote]').on('click',function(e) {
   e.preventDefault();
   var $this = $(this);
   var remote = $this.data('load-remote');
   if(remote) {
    $($this.data('remote-target')).load(remote);
    }
 });    

Ajax request:

$.ajax({
              type  : "POST",
              url   : "envia-buscar-contrato",
              data  : {var_radio:var_radio,var_valor:var_valor},
              datatype : 'html',
              success: function(data) {         

                    $("#form-buscar :input").prop("disabled", false);           
                    $('.bloquear2').hide();                     
                    $('#resultado').show(); 
                    $("#resultado").slideDown();
                    $("#resultado").html(data);
              }
            });          

 });

Skeleton of the modal idDivModal5:

<div id="idDivModal5" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        </div>
    </div>
</div>

Button returned via ajax:

<div id="resultado">
<a class="botao-form" href='#idDivModal5' role='button' 
data-toggle='modal'                                                               
data-load-remote='cancelar-contrato/<?php echo $codigo_contrato;?>'
 data-remote-target='#idDivModal5 .modal-content' 
aria-hidden='true'>Cancelar contrato</a>
</div>

Remember that when the button above is not pressed via ajax, it opens the idDivmodal5 modal normally. From the moment I return the button via ajax, it does not open. Where I am missing?

Answer 1

As @Gabriel Rodrigues mentioned, your button is not on the DOM

an alternative is:

$(document).on('click', 'classDoBotão', function(){
    // codigo aqui
});

Simply put, jquery will now search the page for all buttons with the class or id that you pass within the second parameter, and perform its function

Answer 2

Your problem is that the button was not loaded into the gift at the time you were creating the selector, so it does not exist yet, to get around this problem you can use the bootstrap documentation.

In Modal you can use the event show.bs.modal which is when the modal elements have already been loaded.

An Example of this would be:

$('#idDivModal5').on('show.bs.modal', function () {
  $(".btn-cancelar-contrato").on('click',function(){
       // Modal disponivel e com click funcionando.
   });
})

Da para fazer um callback do evento load que vai funcionar tbm.