jQuery: How to attach an event to newly created element inside class
<p>I'm trying to create a Object class that will take data and create a list of elements.  I also want to attach a click event on the new LI's that fires a method of the class.  However, when using the</p>

<pre><code>el.click(function() {
    this.method();
});
</code></pre>

<p><code>this</code> no-longer references the Class, so clicking on the <code>li</code> gives you an undefined method error.  Suggestions on how to attach the class method to the newly create elements?</p>

<p>JS Code:</p>

<pre><code>if (typeof Object.create !== 'function') {
    Object.create = function(o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

var base = {
    init: function(data) {
        this.data = data;
        this.show_data();
    },


    show_data: function() {

        for (i = 0; i &lt; this.data.bindings.length; i++) {

            var $item = $('&lt;li&gt;' + this.data.bindings[i].ircEvent + '&lt;/li&gt;');
            $item.click(function() {
                this.show_clicked(i);
            });
            $('#it').append($item);
        }
    },

    show_clicked: function(index) {
        console.log('clicked in method');
    }
};

var extended = {

    show_alert: function() {
        alert('second class');
    }
};


var myObj = {
    "bindings": [
        {
        "ircEvent": "PRIVMSG",
        "method": "newURI",
        "regex": "^http://.*"},
    {
        "ircEvent": "PRIVMSG",
        "method": "deleteURI",
        "regex": "^delete.*"},
    {
        "ircEvent": "PRIVMSG",
        "method": "randomURI",
        "regex": "^random.*"}
    ]
};

$(document).ready(function() {

    var baseObj = Object.create(base);
    baseObj.init(myObj);

});
</code></pre>

<p>Fiddle: <a href="http://jsfiddle.net/kmfstudios/EwC3r/5/" rel="nofollow">http://jsfiddle.net/kmfstudios/EwC3r/5/</a></p>
