get the id of a dynamically generated tag a

Question

Good morning.

Can anyone tell me how to use jquery to capture some data from a tag within a dynamically generated table? In fact everything within the div "showPesqReserva" is generated dynamically.

Ex:

<div id="showPesqReserva">
   <div id="calendar">
       <table id="tabela">
           <tr>
              <td><a role="button" class="dayReserve" data-dia="2016-01-15" data-local="sala1" data-horario="17:30">15</a></td>
           </tr>
       </table>
   </div>
</div>

I’m doing it this way but it’s not working. It doesn’t generate error and nothing happens when clicking:

$("#tabela").on("click", "a", function(event){
    var iData = $(this).data("dia");
    var iLocal = $(this).data("local");
    var iHorario = $(this).data("horario");
    event.prevendDefault();
    $.ajax({
       type: "GET",
       url: "fazalgumacoisa.php",
       data: "dia="+iData + "&espaco="+iLocal + "&horas="+iHorario,
       dataType: "html",
       ...
    })
    return false;
});

Answer 1

Assuming that your div is inside the tag body of your html and that you already have the jquery library included in the code, Do the following:

<script>
$(document).ready(function(){

    $("body").delegate(".dayReserve", "click", function(e){
        //Retirando ação padrão já no início do código.
        e.preventDefault()

        var iData = $(this).data("dia");
        var iLocal = $(this).data("local");
        var iHorario = $(this).data("horario");

        $.ajax({
           type: "GET",
           url: "fazalgumacoisa.php",
           data: "dia="+iData + "&espaco="+iLocal + "&horas="+iHorario,
           dataType: "html",
           ...
        })
        return false;
    });
})

</script>

The .delegate() will allow other dynamically generated links without refresh tbm to be clicked. You can use the .live() also.

Remembering that your jQuery code should always stay inside $(document).ready(function(){...}); OR $(function(){...}); I hope I’ve helped!!!