Javascript 图像库预览未在Chrome和Safari中正确显示

我制作了一个图像库，你可以点击一个图像来显示它的更大版本。单击图像时，将在下一行插入一个新图像。我遇到了一个错误，我不知道如何解决它。例如，如果单击第一行上的图像，将显示该图像的预览。然后，如果单击下面两行的图像，则不会显示图像预览。它在Chrome和Safari中都不起作用。在Firefox中，它工作得很好

以下是我使用的Javascript和jQuery（2.0.3）：

$（document）.on（“click”，“.imgBox”，function（））{
imgsrc=$（this.find（'img'）.attr（'src'）；
var bigBox=$（''）；
imgClicked=$（此）；
$（'.bigBox'）.remove（）
如果（$（“.bigBox”）.length>0）{
bigBox.find（'img'）.attr（'src'，imgsrc）；
bigBox.insertAfter（imgClicked）；
}否则{
bigBox.insertAfter（imgClicked.css（'display'，'block'）；
}
});

我已经创建了一个新的应用程序，以便您可以自己尝试。只需确保调整浏览器窗口的大小，以便至少获得3行

---

我已经在OSX上的Chrome 30.0.1599.101、Safari 6.0.5和Firefox 24.0中进行了测试。

我在Windows上的Chrome 30.0.1599.101 m中进行了测试，效果非常好

警告：此解决方案有点黑客行为。：）

我注意到，当我调整JSFIDLE窗口的大小时，chrome显示了这个图像。所以我开始尝试如何“愚弄”chrome，让它再次重新上漆。有。我选择操纵

样式

属性

因此，我创建了一个简单的检查，将

overflow

属性从

auto

动态设置为

visible

（这两个值都不会破坏布局。当用户单击图像时，我会切换这些值。如下所示：

---

请注意，我稍微更改了您的脚本。更改了事件侦听器的元素，在函数中使用了变量，并使用而不是

。remove（）

当我们需要将元素重新插入DOM时，它更适合。

如果在

px

中的.bigBox中指定

宽度，而不是
%
，它会是一个dealbraker吗？我在CSS中做了一些调整，在我看来问题就在那里。这很奇怪。如果你调整JSFIDLE窗口的大小，它就会出现）
$(document).on("click", ".imgBox", function(){
    imgsrc = $(this).find('img').attr('src');
    var bigBox = $('<div class="bigBox"><img src="'+imgsrc+'"/></div>');
    imgClicked = $(this);
    $('.bigBox').remove()
    if ($(".bigBox").length > 0){

            bigBox.find('img').attr('src', imgsrc);
            bigBox.insertAfter(imgClicked);
    } else {
            bigBox.insertAfter(imgClicked).css('display', 'block');
    }


});