javascript - 将HTML添加到Document正文，不允许div单击 - Thinbug

将HTML添加到Document正文，不允许div单击

时间：2017-01-15 20:02:36

标签： javascript jquery

当点击蝙蝠侠图像时，它显示“覆盖”div但是由于某种原因div不可点击，因此不允许代码的onclick部分运行。删除'document.body .....'代码行解决了这个问题，但为什么呢？

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>

3 个答案:

答案 0 :(得分：0)

使用扩展的jQuery格式，如：

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

检查jQuery API是否有扩展的.on()参数。

答案 1 :(得分：0)

您的处理程序适用于附加到innerHTML时重新创建的某些元素。你需要.prepend到身体并且有这样的事情：

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);

}

答案 2 :(得分：0)

document.body.innerHTML = ...使用新元素覆盖正文中的元素。新元素不会有任何事件监听器。所以点击它们不会触发任何功能。因此，使用insertBefore来代替使用新元素来消除身体内容：

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

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

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

}