событие hasdle click для изображения, которое может иметь угловую ленту, покрывающую часть

Question

У меня есть div с идентификатором items с кучей загрузочных карт, каждая из которых имеет тег, а за некоторыми следует

<div class="ribbon"><span>Sale</span></div>

, который помещает ленту CSS в верхнем правом углу изображения, показывая, что товар продается.

У меня включен Jquery ("click", "img", function ()

$("#items").on("click", "img", function () {
    var path = $(this).attr('alt');
    if (path != "none") {
        $('#model-image-img').attr('src', path);
        $('#model-title').text($(this).attr('data-title'));
        $('#model-image').modal('show');
    } else {
        return false;
    }

, который открывает модал с увеличенной версией изображения при каждом нажатии.

Если на изображении есть лента в верхнем правом углу, а курсор находится над полем 100px x 100px, используемым для отображения ленты при щелчке мыши, ничего не происходит.

Как мне поступить, если щелкнуть мышью по ленте, чтобы она открыла модальное пространство и показала увеличенное изображение?

Answer 1

Вы можете создать контейнер, скажем, <div class="offer">. Вы помещаете свое изображение и ленту в это предложение. Затем вы модифицируете обработчик

$("#items").on("click", "div.offer", function () {
    var path = $(this).find("img").attr('alt');
...

чтобы сработал клик из дивизиона предложения.