Pick up dynamic loaded element id

Question

My script contains three parts:

The first is the display page (e.g., home.php) on it I include two other pages.

The second is a page that queries the database and displays the first 5 results (e.g., Consult-1.php) this is displayed by default.

The third is another page that displays 5 more results from the last id listed in home.php (ex: Consult-2.php) when the user demands this query, and each new demand shows 5 more results.

The includes are made within a div and to return results from the "Consult-2.php" page I use the following:

    $(".minha-div:last").after(data); //Aonde "data" é o retorno de "consult-2.php"

The elements displayed both by the "Consult-1.php" pre-load page and by the "Consult-2.php" page have the return of their respective "ids" by surveying clearly can velos but in the script need to pick up these ids in a "click" function with jquery.

The problem lies exactly there, I can only get the "ids" of the results displayed by the page "Consult-1.php" the results of "Consult-2.php" although they are displayed and have "ids" I can not capture them nor if you want to display them with a simple Alert :(

Thanks in advance for any help!

HOME.PHP

<?php
  if(isset($_GET['last_msg_id'])){
      $last_msg_id = $_GET['last_msg_id'];
  }
  if(isset($_GET['action'])){
      $action=$_GET['action'];
  }else{ 
    $action = ''; 
  }

  if($action != "get"){
?>

   <div id="Minha-Div">

       <?php include('consult-1.php'); ?>

       <div id="last_msg_loader"></div>

       <?php 
         }else{
           include('consult-2.php');
           exit();
         }
       ?> 
   </div>

CONSULT-1.PHP

<?php
   $Busca = $pdo->query("SELECT * FROM minha-tabela ORDER By id DESC LIMIT 5");
   $Busca->execute();

   while($fetch = $Busca->fetch(PDO::FETCH_ASSOC)){

        $id =  $fetch['id'];
        $conteudo =  $fetch['conteudo'];

?>

<div id="<?php echo $id; ?>" class="message_box">

       <div><?php echo $conteudo; ?></div>

</div>

<?php 
   }// Fechamento do "while" !
?>

CONSULT-2.PHP

<?php
   $last_msg_id = $_GET['last_msg_id'];
   $Busca = $pdo->query("SELECT * FROM minha-tabela WHERE id < '$last_msg_id' ORDER By id DESC LIMIT 5");
   $Busca->execute();

   while($fetch = $Busca->fetch(PDO::FETCH_ASSOC)){

        $id =  $fetch['id'];
        $conteudo =  $fetch['conteudo'];

?>

<div id="<?php echo $id; ?>" class="message_box">

       <div><?php echo $conteudo; ?></div>

</div>

<?php 
   }// Fechamento do "while" !
?>

I use scroll bar scroll to start function that displays more items:

SCRIPT.JS

// Verifica scroll e chama função 
$(window).scroll(function(){
   if($(window).scrollTop() == $(document).height() - $(window).height()){
      last_msg_funtion();
   }
});
// Função que busca
function last_msg_funtion(){
    // Verifica se há conteúdo na tela...caso haja usamos "return"
    if($('#last_msg_loader img').length){
       //Isso evita duplicatas caso haja conteúdo carregado!
       return;
    }
    // salvamos o ultimo id da lista
    var ID = $(".message_box:last").attr("id");

    // Mostramos imagem de carregamento
    $('#last_msg_loader').html('<img src="load.gif">');
    // Enviamos o post (para esta mesma página)
    $.post("home.php?action=get&last_msg_id="+ID, function(data){
      // se a resposta não for vazia...
      if(data != ""){
          // Inserimos ela
          $(".message_box:last").after(data);     
      }
      // Limpamos o .gif
      $('#last_msg_loader').empty();

    });
};// Fechamos a função

Answer 1

It was not understood correctly, but if you want to trigger a "click" event in a dynamically created element use the on() of the BODY element and not the direct click(). It would look something like this:

$("body").on(
    "click",
    ".classe_do_elemento", // pode ser ID tbm
    function (event) {
        // sua lógica aqui
    }
);