dynamically added div will not work when being called on
<p>I am trying to create a list of divs. When the new layer button is clicked, there is a new div created with a unique ID. When I try to call on these dynamically added divs, there is no response. I am confused because the preexisting divs work. </p>

<pre><code>&lt;input type="submit" id="newLayer" value="New Layer"&gt;

 &lt;div id="layersContainer" class="layerscontainer"&gt;
    &lt;div class="layer" id="layer1"&gt;fadfa&lt;/div&gt;
    &lt;div class="layer" id="layer2"&gt;2&lt;/div&gt;            
 &lt;/div&gt;


var newLayerCounter = 2;
var layerID = "";
var layersArray = new Array();
var clickedElement = "";


function selectLayer(){

      $(clickedElement).css({"background-color":"yellow"});

    }

$('#layersContainer div').on("click", function(){

    clickedElement = $(this).attr("id");
    alert(clickedElement);
    selectLayer();

});

$('#newLayer').on("click", function(){

    newLayerCounter = newLayerCounter + 1;
    layerID = "#layer"+ newLayerCounter;

    $('&lt;div/&gt;', {
    id: "layer"+ newLayerCounter,
    class: "layer"
   }).appendTo('#layersContainer');

    $(layerID).text('hey');

})
</code></pre>

<p>Here is a link to a working JSfiddle </p>

<p><a href="http://jsfiddle.net/Q3dSp/24/" rel="nofollow">http://jsfiddle.net/Q3dSp/24/</a></p>
