Javascript jquery`.on（'；单击'；）中的异常行为`

我制作了一个显示媒体文件（img、视频和pdf）的滑块，可以选择这些媒体文件来对其执行一些操作（删除和附加），所以不管怎样，最初我制作了一个名为

selected media

的类，它有一个阴影，效果不错，但非常难看（你知道，媒体文件可以改变纵横比等等，这个阴影应用在包含实际

，

，而不是媒体本身的div上）。所以我决定用谷歌搜索一些方法使这个阴影动态化，这样它就不是应用在div上，而是应用在img本身周围

为了做到这一点，我按照SO的回答做了以下工作：

有趣的是，尽管url总是一样的，但这个阴影是动态的，它完全符合我的要求。这很好，因为我使用flask作为后端，动态地将url输入css是一个很大的麻烦

但是有一个问题，也是一个奇怪的问题，当我添加pdf支持时，这个问题就出现了

以下是滑块的结构：

---

现在，有趣的是，jQuery没有向

元素添加任何类，html在上面显示的两种情况下看起来是相同的。我不确定这里发生了什么，当然，如果您单击文本，它仍然会对img应用效果，但就在那里。

是否只对图像进行css更改？是的，没错你想只对图像进行css更改吗？是的，没错

.selected-media{
    -webkit-filter: drop-shadow(12px 12px 25px darkturquoise);
    filter: url(an_url);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";

}

<div id="media-slider">
    <div class="selectable selected-media" id="single-media-5">
        <img class="single-media" src="img-url">
    </div>
    <div class="selectable selected-media" id="single-media-26">
        <div style="height: 100px; text-align:center">
            <img class="single-media" src="\\static\\resources\\pdf-placeholder-icon.png" >
            <p>'+ pdf_name +'</p>
        </div>
    </div>
</div>

$(document).on("click","#media-slider > div.selectable", function (event) {

        if (!event.currentTarget.classList.contains("selected-media")){
            event.currentTarget.classList.add("selected-media");

        }

        else {
            event.currentTarget.classList.remove("selected-media");

        }

});