Jquery Not working in returned ajax data appended to a Div
<p>I am not really sure if I have asked the question correctly. </p>

<p>The problem is i have Page 1 that calls Page 2 with jQuery ajax.  Then Page 1 puts the returned data into a div with using .html(data).  This part works perfect however when  want to create a .click function to a element in loaded div code it does not perform any action. my code looks like this.</p>

<p>Page 1:</p>

<pre><code>&lt;div class="settings"&gt;&lt;/div&gt;

&lt;script&gt;
$(document).ready(function(e){
$.ajax({
type: 'POST',
url: "Page2.php",                 
success: function(data) {
    $('.settings').html(data)
}
});

$('.links').click(function(e){
 alert("it worked");
});

});
&lt;/script&gt;
</code></pre>

<p>Page 2 Code</p>

<pre><code>&lt;ul&gt;&lt;li class="links"&gt;Test 1&lt;/li&gt; &lt;li class="links"&gt;Test 2&lt;/li&gt;&lt;/ul&gt;
</code></pre>