jQuery：如何將事件附加到類中新創建的元素上

Question

我正在嘗試創建一個Object類，該類將獲取數據並創建元素列表。 我還想在新的LI上附加一個click事件，以觸發該類的方法。 但是，當使用

el.click(function() {
    this.method();
});

this不再引用該類，因此單擊li會給您帶來未定義的方法錯誤。 關於如何將class方法附加到新創建的元素上的建議？

JS代碼：

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 < this.data.bindings.length; i++) {

            var $item = $('<li>' + this.data.bindings[i].ircEvent + '</li>');
            $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);

});

小提琴： http : //jsfiddle.net/kmfstudios/EwC3r/5/

Answer 1

為了使您的方法在click函數中起作用，只需引用包含該對象的全局變量即可。

該行：

    this.show_clicked(i);

應該更改為：

   base.show_clicked(i);

如果您希望索引值顯示在最終結果中，則必須將其作為數據傳遞，或者使用jquery確定單擊了哪個索引。

這是一個有效的更新小提琴-http: //jsfiddle.net/EwC3r/4/