Reffering to dynamically created elements
<p>I am trying to sort out a problem I am having with JQuery. When I dynamically create elements in the DOM, the associated events don't seem to trigger (e.g.: .hover). Not sure if, when creating elements dynamically, do I have to attach the element events somehow? Thanks in advance!</p>

<p>HTML Code:</p>

<pre><code>    &lt;div id="dosages" style="display:none;"&gt;
        &lt;h4&gt;Choose a dosage&lt;/h4&gt;
        &lt;ul id="dosagesUL" class="thumbnails"&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>Jquery/Javascript:</p>

<pre><code>    $("#medsSelect").change(function () {

    var dosages = [];
    var dosage;
    var caption;
    var image;
    var html;
    var idx;

    $("#medsSelect option:selected").each(function () {

        idx = $(this).attr("value");

        for (i = 0; i &lt; medsArray[idx][1].length; i++) {

            dosage = medsArray[idx][1][i];
            caption = medsArray[idx][2][i];
            image = medsArray[idx][3][i];

            html =  "&lt;li class=\"span2\"&gt;";
            html += "&lt;div id=\"dosageIdx-\" + idx&gt;";

            html += "&lt;div class=\"thumbnail\"&gt;";
            html += "&lt;img src=\"img/meds/" + image + ".png\"&gt;"
            html += "&lt;/div&gt;";

            html += "&lt;div class=\"thumbnail-capbox\"&gt;";
            html += "&lt;div class=\"med-label\"&gt;" + dosage + "&lt;/div&gt;";
            html += "&lt;div class=\"med-caption\"&gt;" + caption + "&lt;/div&gt;";
            html += "&lt;/div&gt;";

            html += "&lt;/div&gt;";
            html += "&lt;/li&gt;";

            dosages.push(html);
        }

    });

    $("#dosages").fadeOut(0);
    $("#dosagesUL").empty();
    $("#dosagesUL").append(dosages.join(''));
    $("#dosages").fadeIn(600);

    })

    $('div[id*="dosageIdx-"]').hover(

        function () {
            alert('in');
        },

        function () {
            alert('out');
        }
    );
</code></pre>
