JQuery - how to append a dynamic href and use onclick?
<p>I combined many things from what I read in forums and here is what I got so far:</p>

<pre><code>$(document).ready(function () {
    $('input[name=key]').keyup(performUsernameAjax).focusin(performUsernameAjax);
    $('#users').click(function (event) {
        console.log('hello');
        event.preventDefault();
        console.log($(this).text());
        var dataStr = {
            'username': $(this).text(),
            'method': 'userdata'
        };
        var base_url = '&lt;?= base_url() ?&gt;';
        var url = base_url + 'login/userdata';
        console.log(url);
        $.ajax({
            type: 'POST',
            data: dataStr,
            dataType: 'json',
            url: url,
            success: function (data) {
                $("#userInfo").append("&lt;p&gt;&lt;ul&gt;&lt;h3&gt; " + data.username + "'s Info:&lt;/h3&gt;");

                $("#userInfo").append('&lt;li&gt; The username: ' + data.username + '&lt;/li&gt;');
                $("#userInfo").append('&lt;li&gt; The full name: ' + data.fullname + '&lt;/li&gt;');
                $("#userInfo").append('&lt;li&gt; The num of failed logins: ' + data.failedlogin + '&lt;/li&gt;');

                $("#userInfo").append('&lt;/ul&gt;&lt;/p&gt;');
            }
        });
        return false; //for good measure
    });
});
</code></pre>

<p>//part of the performUsernameAjax function</p>

<pre><code>for (var i = 0; i &lt; data.length; i++) {
   console.log(data[i].username);
   $("#usernameList").append("&lt;p&gt;&lt;a href='#' id='users'&gt;" + data[i].username + "&lt;/a&gt;&lt;/p&gt;");
}
</code></pre>

<p><strong>HTML :</strong></p>

<pre><code>&lt;div class="field-info" id="usernameList"&gt; &lt;/div&gt;
&lt;br&gt;
&lt;p&gt;&lt;div class="field-info" id="userInfo"&gt; &lt;/div&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="#" id="users"&gt;rotemel&lt;/a&gt;&lt;/p&gt;
</code></pre>

<p>The "for" loop is supposed to create a list of hyperlinks with usernames and I want that whenever a link is clicked the "click" listener will "catch" it and will do whatever I do there.. But it doesn't work so I tried few things: 
when I append a link in the "for" loop like that:</p>

<pre><code>$("#usernameList").append("&lt;p&gt;&lt;a href='http://www.google.com' id='users'&gt;" +
                            data[i].username + "&lt;/a&gt;&lt;/p&gt;");
</code></pre>

<p>the link itself works fine - it redirects to the google page but when I do this:</p>

<pre><code>$("#usernameList").append("&lt;p&gt;&lt;a href='#' id='users'&gt;" +
                            data[i].username + "&lt;/a&gt;&lt;/p&gt;");
</code></pre>

<p>because I want it to go to the "click" listener function that I've created,
it does nothing...
I thought perhaps that it might be the "click" listener function's fault so I added in the html file:</p>

<pre><code>&lt;p&gt;&lt;a href="#" id="users"&gt;rotemel&lt;/a&gt;&lt;/p&gt;
</code></pre>

<p>and it worked perfectly! 
So I'm just lost... what is the problem with my append or my href??
Thanks in advance! </p>