I an image grid, when I click on an div containing image then the selected div should change the background. Now it does this only the second time, when inspecting the page source I can see that there is code added to change the background style="background-color: rgb(xxx, xxx, xxx);".
CSS
.library-grid-images{
background-color: #c3c3c3;
}
Script
function display_image_info(id) {
// reset all image boxes
$(".library-grid-images").css( "background-color", "#c3c3c3");
//Selected box
var divid = "library-image-box-"+id;
$("#"+divid).on( "click", function( event ) {
$(event.delegateTarget ).css( "background-color", "#878787");
});
$('.library-images-info').load('/fam/library/library-image-info.php?id='+id);
// image footer actions
$("#image-actions-footer").css("visibility", "visible");
$('#id-image-actions-footer').val(id);
};
HTML
<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);">
When selected
<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);" style="background-color: rgb(135, 135, 135);">
When other selected
<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);" style="background-color: rgb(195, 195, 195);">