onclick可更改后台添加代码，但只能在第二次单击后更改

Question

一个图像网格，当我点击包含图像的div时，选择的div应该改变背景。现在它只做了第二次，当检查页面源代码时，我可以看到添加了更改背景style=“background-color：rgb(xxx，xxx，xxx)；”的代码。

CSS

.library-grid-images{
    background-color: #c3c3c3;
}

脚本

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

选中时

<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);" style="background-color: rgb(135, 135, 135);">

选择其他时

<div id="library-image-box-19923" class="library-grid-images" onclick="display_image_info(19923);" style="background-color: rgb(195, 195, 195);">

Answer 1

更改JS功能

function display_image_info(id) {
    // reset all image boxes    
    $(".library-grid-images").css( "background-color", "#c3c3c3");
    //Selected box 
    var divid = "library-image-box-"+id;

    //Change Here
        $("#"+divid).css( "background-color", "#878787");
    //END Change
    
    $('.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);
};

https://jsfidle.net/lalji1051/uzb4r59s/