使用JQuery更改CSS，以动态创建多个div（未知div ID）

Question

I am creating a bunch of color swatches from an array using PHP.

Here is the PHP code (I've removed some of the colors from the array, to make the code shorter, in practice there are many more).

$colors = array(
        "Light Blue"=>"198,248,253",
        "Medium Blue"=>"112,204,246",
        "Blue"=>"84,140,242",
        "Dark Blue"=>"52,55,199",
        "Dark Green"=>"53,172,58",
        "Light Green"=>"191,235,104"
    );

    echo "<label>Color:</label>";

    foreach ($colors as $colorName => $colorCode) {
        echo "<div style='background-color:rgb(".$colorCode.");' class='swatch' id='".str_replace(" ","_",$colorName)."'></div>";

    }

I would like, when the user selects (clicks) a swatch, a css border is added to highlight the user's selection.

I have tried the following JQuery, but can't seem to get it working.

$(document).ready(function() {

    $(document).on('click', 'div', function () {

        $(this.id).css('border','solid 1px black');

});

});

I'm sure it is something rather simple, simply down to my lack of experience with JQuery. Any help appreciated. Thanks,

Dingo Bruce

Answer 1

You know you have a class given to each dynamically created element . So just use event delegation and add css to clicked class rather say element as follows:

$(document).on('click','.swatch',function(){
    $(this).css('border','solid 1px black'); //$(this) refers to current element here
});

As per @Anders comment if you want to remove border from all other divs with class swatch and want to keep only on the current clicked item below will be the piece of code which helps you to achieve the same.

$(document).on('click','.swatch',function(){
    $('.swatch').css('border','0px');
    //if you don't have any extra inline styling then you can directly remove your 
    //style attribute with $('.swatch').removeAttr('style'); Use either of one
    $(this).css('border','solid 1px black'); //$(this) refers to current element here
});