Javascript 将HTML添加到文档正文不允许div单击

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

JS:

window.onload=function（）
{
$（“#覆盖”）.hide（）；
}
$（文档）.ready（函数（）{
//页面已准备就绪
$（“#覆盖”）。在（“单击”，函数（）{
警报（“hi”）；
美元（“#叠加”）。淡出（500）；
});
$（“#蝙蝠侠”）。在（“单击”，函数（）{
lightboxImg（）
});
});
函数lightboxImg（）
{
var source=$（'#蝙蝠侠'）.attr（'src'）；
var text=“”；
document.body.innerHTML=文本+document.body.innerHTML；
$（“#叠加”）.fadeIn（0）；
}

HTML:

灯箱





随机文本内容



328ueekfuuirgh40t43h8hohro8ht

使用扩展jQuery格式，如：

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

---

检查jQuery API以获取扩展的

.on（）

参数。

您的处理程序应用于某些元素，这些元素在附加到

innerHTML

时重新创建。您需要将.prepend添加到body，并具有如下内容：

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

}

window.onload=function（）
{
$（“#覆盖”）.hide（）；
}
$（文档）.ready（函数（）{
//页面已准备就绪
$（“正文”）。在（“单击”，“覆盖”，函数（）上）{
警报（“hi”）；
美元（“#叠加”）。淡出（500）；
});
$（'body'）。在（“单击”，“蝙蝠侠”，函数（）上）{
lightboxImg（）
});
});
函数lightboxImg（）
{
var source=$（'#蝙蝠侠'）.attr（'src'）；
var text=“”；
$（“正文”）。前缀（文本）；
$（“#叠加”）.fadeIn（0）；
}

document.body.innerHTML=…

使用新元素覆盖正文中的元素。新元素将没有任何事件侦听器。因此，单击它们不会触发任何函数。因此，与其使用新元素验证正文内容，不如使用

insertBefore

like：

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

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

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

}

函数lightboxImg（）
{
var source=$（'#蝙蝠侠'）.attr（'src'）；
var text=“”；
//插入之前
$（文本）.insertBefore（$（“#覆盖”）；
$（“#叠加”）.fadeIn（0）；
}

您能分享一个JSFIDLE链接或一个完整的示例（图像和css）以便我们与您核对吗？欢迎使用so和帮助的可能副本！注意，它不是“扩展的”jQuery格式，它被称为。此外，您应该扩展示例代码以显示问题中的相关位。最后，这个问题是重复的，所以作为so的优秀管理者，您不会回答，而是投票以重复的方式结束问题。@cale_b谢谢，我将尝试在回答和术语方面更相关！或

$（“body”）。如果要先插入（text）

，则不管第一个元素是什么。

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

}

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

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

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

}