D3 selectAll change color

I am new to D3 and i'm stuck on a case.I have a button that adds circles to my svg.

    d3.select("button#add").on("click", function()    {      svg.append('circle')      .attr('class', 'little')      .attr("cx", Math.random()*280+10)      .attr("cy",Math.random()*280+10)      .attr("r", 12);    });

Afterwards I would like to change the color when you click on a circle. For some reason the code doesn't even start the event.

d3.selectAll(".little").on('click', function()    {        d3.select(this).style("fill", "red");    });