Странное поведение в jquery `.on ('click')`

Question

Я сделал слайдер, который отображает мультимедийные файлы (img, video и pdf), и эти мультимедийные файлы можно выбрать для выполнения некоторых операций с ними (удаление и присоединение), поэтому в любом случае изначально я создал класс с именем selected-media, у которого была тень, это работало нормально, но это было довольно уродливо (вы знаете, медиа-файлы могут меняться в соотношении сторон и тому подобное, и эта тень была применена к элементу div, содержащему <img>, <video>, а не сам носитель) , Поэтому я решил поискать несколько способов сделать эту тень динамической c, чтобы она применялась не к div, а вокруг самого img.

Для этого я следовал SO-ответу и делал следующее:

.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')";

}

Теперь, как ни странно, хотя URL-адрес всегда один и тот же, эта тень как-то динамична c, и она делает именно то, что я хотел. Это хорошо, потому что я использую flask для бэкэнда, а динамическое добавление URL в css - большая боль в заднице.

Однако была проблема, и странная, и Это появилось, когда я добавил поддержку PDF.

Вот структура слайдера:

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

        }

});

Теперь забавно Дело в том, что jQuery не добавляет ни одного класса к элементу <p>, html выглядит идентично в двух случаях, показанных выше. Я не уверен, что здесь происходит, конечно, если вы нажмете на текст, он все равно должен применить эффект к IMG, но только там.