Adding HTML to Document body not allowing for div click

Question

When the batman image is clicked on it shows the 'overlay' div however that div is not clickable for some reason thus not allowing the onclick portion of the code to run. Deleting the 'document.body..... ' line of code solves this issue but why?

JS:

window.onload = function()
{
  $("#overlay").hide();
}


$(document).ready(function(){
 //page is ready

    $("#overlay").on("click",function(){
        alert("hi");
        $("#overlay").fadeOut(500);
    });

    $('#batman').on("click",function(){
       lightboxImg()
    });
});


function lightboxImg() 
{
  var source = $('#batman').attr('src');
  var text = "<img src= \"" +  source +  "\"  id=\"lightbox-img\"/>";
  document.body.innerHTML = text + document.body.innerHTML;

   $("#overlay").fadeIn(0);

}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title> Lightbox </title>
        <link rel="stylesheet" type="text/css" href="lightboxcss.css">
    </head>
    <body>
        <div id = "overlay"></div> 


        <img src="batman.jpg" alt="" href="javascript:void(0)"  id="batman" >

        <br><br><br><br>

        <p> RANDOM TEXT STUFF </p><br><br>
        <p> 328ueekfuuirgh40t43h8hohro8ht </p>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <script src="lightboxjs.js"> </script>
    </body>
</html>

Can you share a jsfiddle link or a complete example (images and css) so we can check with you? — Ala Eddine JEBALI, Jan 15 '17 at 20:19
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — random_user_name, Jan 15 '17 at 20:21

score 0 · Answer 1 · edited Jan 31 '17 at 08:47

0

Use extended jQuery format like:

$(document).on('click', $(#....), function(){});

Check jQuery API for extended .on() parameters.

edited Jan 31 '17 at 08:47

marc_s

732,580
175
1,330
1,459

answered Jan 15 '17 at 20:16

Daniel

611
5
20

Welcome to SO and for helping! Note it's not "extended" jQuery format, it's called [event delegation](https://learn.jquery.com/events/event-delegation/). Additionally, you should expand your example code to show the relevant bits from the question. Lastly, this question is a duplicate, so as a good steward of SO, you would not answer, but rather vote to close the question as duplicate. – random_user_name Jan 15 '17 at 20:20
@cale_b thank you, I'll try to be more relevant in answers and terminology! – Daniel Jan 15 '17 at 20:23

score 0 · Answer 2 · answered Jan 15 '17 at 20:19

Your handlers apply to some elements which are recreated when you append to innerHTML. You need to .prepend to body and have something like this:

window.onload = function()
{
  $("#overlay").hide();
}


$(document).ready(function(){
 //page is ready

    $("body").on("click", "#overlay",function(){
        alert("hi");
        $("#overlay").fadeOut(500);
    });

    $('body').on("click", "#batman",function(){
       lightboxImg()
    });
});


function lightboxImg() 
{
  var source = $('#batman').attr('src');
  var text = "<img src= \"" +  source +  "\"  id=\"lightbox-img\"/>";
  $("body").prepend(text);

   $("#overlay").fadeIn(0);

}

ibrahim mahrir · Answer 3 · 2017-01-15T20:30:46.300

0

document.body.innerHTML = ... overrides the element inside the body with new elements. The new elements won't have any event listeners. So clicking them won't fire any functions. So instead of ovveriding the body content with new elements use insertBefore like:

function lightboxImg() 
{
   var source = $('#batman').attr('src');
   var text = "<img src= \"" +  source +  "\"  id=\"lightbox-img\"/>";

   //insertBefore
   $(text).insertBefore($("#overlay"));

   $("#overlay").fadeIn(0);

}

edited Jan 15 '17 at 20:30

answered Jan 15 '17 at 20:24

ibrahim mahrir

31,174
5
48
73

or `$("body").prepend(text)` if you want to insert it first no matter what the first element is. – ibrahim mahrir Jan 15 '17 at 20:29

Adding HTML to Document body not allowing for div click

JS:

HTML:

3 Answers3