shirts.on('input', function () {
shirts.removeClass('product-info .option-image img');
$(this).addClass('border-class');
})
you should try to remove above code. I think it never does anything because it gets called before the DOM has loaded. Perhaps you intended it to be inside a $(document).ready(function(){})
?
and add following code in its place
$(function () {
$('.option-image').click(function(ev){
if(ev.target.tagName !== 'IMG') return;
$('label', $(this)).removeClass('border-class');
$(ev.target).closest('label').addClass('border-class');
})
});
above code highlights a selected <label>
. This code uses this event delegation technique.
UPDATE
In order to add class to the <img>
instead of <label>
, use following code
$(function () {
$('.option-image').click(function(ev){
if(ev.target.tagName !== 'IMG') return;
$('img', $(this)).removeClass('border-class');
$(ev.target).addClass('border-class');
})
});