Запуск JavaScript из динамически созданных ссылок

Question

Я создаю сайт стиля блога, в котором он извлекает информацию из базы данных для создания каждого сообщения динамически. После того как все сообщения будут созданы, заголовок с каждого из сообщений откроет оверлейный div, который отобразит всю статью для этого конкретного сообщения.

Как создаются посты ...

<table class="mainTable"> 
    <tr> 
     <td id="mainBanner"> 
      <img class="startLogo" src="images/logo.png"> 
     </td> 

     <?php 
      $sql = 'SELECT * FROM posts ORDER BY Post_ID DESC'; 

      $result = mysqli_query($conn, $sql); 

      if($result){ 
       while($row = mysqli_fetch_assoc($result)){ 
     ?> 
     <td class="<?php if($row['Post_Featured'] == 0) {echo 'visualPost';} else {echo 'featuredPost';} ?>" id="<?php echo $row['Post_ID']; ?>"> 
      <a id="openOverlay" name="<?php echo $row['Post_ID']; ?>" href="#"> 
       <?php echo $row['Post_Title']; ?> 
      </a> 
      <img src="images/<?php echo $row['Post_Image_Embed']; ?>" width="100%"> 
      <p><?php echo $row['Post_Blurb']; ?> Votes:<?php echo $row['Post_Votes']; ?></p> 
     </td> 
     <?php 
       } 
      } 
     ?> 
    </tr> 
</table> 

JavaScript

var createOverlay = document.getElementById("openOverlay"); 
var destroyOverlay = document.getElementById("closeOverlay"); 

createOverlay.onclick = toggleOverlay; 
destroyOverlay.onclick = toggleOverlay; 

function toggleOverlay() { 
    var postID = $(this).attr('name'); 
    var specialBox = document.getElementById('specialBox'); 
    var container = document.getElementById('container'); 

    if (container.style.display == "block") { 
     document.body.style.overflowY = "hidden"; 
     container.style.display = "none"; 
     specialBox.style.display = "none"; 
     $("body").mousewheel(function (event, delta) { 
      this.scrollLeft -= (delta * 20); 
      event.preventDefault(); 
     }); 
     $('div#postOverlay').empty(); 
    } else { 
     document.body.style.overflowX = "hidden"; 
     container.style.display = "block"; 
     specialBox.style.display = "block"; 
     $("body").unmousewheel(); 
     $.ajax({ 
      type: "POST", 
      url: "overlayFill.php", 
      data: { 'id': postID }, 
      success: function (data) { 
       $('div#postOverlay').append(data); 
      } 
     }); 
    } 
    event.preventDefault(); 
} 

Я попытался с помощью document.getElementById ('openOverlay'), чтобы захватить ссылку и запустить подниму JavaScript требуется наложение в зависимости от поста и запуска скрипта php для захвата информации из базы данных и отправки ее на оверлей, но похоже, что она захватывает только первый динамически созданный идентификатор (он же первый идентификатор getElementById), остальные оставленные сообщения Не поднимайте оверлей.

Overlay

<div id="container"> 
    <div id="specialBox"> 
     <a id="closeOverlay" href="#">Close</a> 
     <div id="postOverlay"></div> 
    </div> 
</div> 

Есть ли лучший способ сделать это? Я думал о том, что, возможно, попробовал бы кнопку, но я думал, что у меня будут те же проблемы.

Answer 1

Изменение <a id="openOverlay" к <a class="openOverlay" (и то же самое с #closeOverlay) и использовать JQuery-х .on(), например, так:

$(document).ready(function(){ 
    $(document).on('click', '.openOverlay, .closeOverlay', toggleOverlay); 
}); 

Это позволяет событие быть привязанными к элементам, которые не были добавлены в йот еще.

Answer 2

Вместо динамического создания блока, который имеет другой атрибут id, вы должны использовать class='closeOverlay'.

Затем вместо getElementById('closeOverlay') вы можете использовать getElementsByClassName('closeOverlay') и добавить свою функцию к каждому элементу в этом возвратном массиве.