Dynamically generated div isn't attaching my event listener
<p>I made a modal plugin but for some reason one of the divs that I generate isn't getting a click event listener that I am attaching to it.</p>

<p><code>&lt;a class="close" id="js-close-modal"&gt;&lt;/a&gt;</code> is what I'm referring to. I'm using jQuery's on, but that doesn't seem to help.</p>

<pre><code>        var $caller = $(this);
        var $modal = $('.modal');

        $caller.on('click', $caller, function(e) {
            e.stopPropagation();

            $('#js-close-modal').on('click', $('#js-close-modal'), function(e) {
                $('.modal_outer').remove();
                $('#modal_page_cover').remove();
            });


            var modal_outer = $('&lt;div /&gt;');
            modal_outer.addClass('modal_outer');
            modal_outer.css({
                top: ($(window).scrollTop()) + 'px'
            });

            var $div = $('&lt;div /&gt;');

            var modal = $('&lt;div /&gt;');
            modal.addClass('modal');

            var modal_inner = $('&lt;div /&gt;');
            modal_inner.addClass('modal_inner');

            modal.append(modal_inner);
            modal_outer.append(modal);

            var body = $('body');
            body.append(modal_outer).hide().fadeIn(100);
            modal_inner.text('yo');

            var close = $('&lt;a /&gt;');
            close.addClass('close').attr('id', 'js-close-modal');
            close.insertBefore(modal_inner);


            var page_cover = $('&lt;div /&gt;');
            page_cover.attr('id', 'modal_page_cover');
            body.prepend(page_cover);

});
</code></pre>

<p>Demo: <a href="http://jsfiddle.net/someprimetime/P5B4q/19/" rel="nofollow">JSFiddle</a></p>

<p>Any idea why?</p>
