jQuery - Click() doesn't work when clicking a <li> in an <ul>
<p>Trying to click an item in a dynamically-generated list, but the $.click() function just won't fire. </p>

<p>HTML for the list:</p>

<pre><code>    &lt;div&gt;
    &lt;ul id="site_list"&gt; &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>jQuery to generate the list (which works as intended, generating a long list of data with the desired class attribute):</p>

<pre><code>var sites =[];
    $.getJSON("php/ABC.php", function(result){
        $.each(result.Sites, function(i,v){
            sites.push('&lt;li class="site" id="site_'+ ABC + '&lt;/li&gt;');
        });

        $('#site_list').append(sites.join(''));
    });
</code></pre>

<p>jQuery to be triggered when clicking a list (doesn't work...it doesn't throw errors...just fails to respond. I've tried $('#site') as well, to no avail. I suspect it's due to the method I'm using to generate the ...something is preventing the DOM from properly recognizing each element inside the UL.:</p>

<pre><code>$('li').click(function(){
        $(this).toggleClass("site_selected");
    });
</code></pre>
