In my project, there is a div element with an id of items containing several bootstrap cards. Each card includes an image tag and some are accompanied by the following HTML code:
<div class="ribbon"><span>Sale</span></div>
This code adds a CSS ribbon to the top right corner of the image, indicating that the item is on sale.
I have implemented a jQuery script using the on("click","img",function() 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;
}
This script opens a modal displaying a larger version of the image when it is clicked.
However, I encountered an issue where clicking on the ribbon in the top right corner of the image does not trigger the modal to open. How can I modify the behavior so that clicking on the ribbon also opens the modal to display the larger image?