jQuery面向對象創建dom元素並添加事件監聽器

Question

我有一個小問題。 我在一個對象中創建了一些元素並且工作正常。 但是現在我想添加一些 EventListeners 來執行我的對象內部的函數，問題是我無法執行函數“setSelection”。 （“this”不是對象的“this”，而是點擊函數內部事件的“this”）。

function Object() {
    this.init = function () {
        // delete table
        // ...
        // set table
        $('tr').append('<td id="1">test</td>');

        $('td').click(function() {
            // execute setSelection
        });
    }

    this.setSelection = function(x) {
        alert('You clicked id ' + x);
    }
}

$(document).ready(function() {
    x = new Object();
    x.init();
});

Answer 1

    $('td').click((function(e) {
        // execute setSelection
        this.setSelection(...);
    }).bind(this));

Answer 2

您可以通過將this在外部作用域中的引用存儲到可在click事件處理程序中使用的變量來解決此問題：

function Object() {
    var _this = this;

    this.init = function () {
        // delete table
        // ...
        // set table
        $('tr').append('<td id="1">test</td>');

        $('td').click(function() {
            _this.doSomething();
        });
    }

    this.setSelection = function(x) {
        alert('You clicked id ' + x);
    }
}

Answer 3

我的方法是：

function Object() {
  this.init = function () {
    // delete table
    // ...
    // set table
    $('tr').append('<td id="1">test</td>');

    $('td').click(function() {
      setSelection(this);
    });
  }

  setSelection = function(x) {
    alert('You clicked id ' + x);
  }
}

Answer 4

我已經解決了問題...

function Object() {
    this.init = function () {
        // delete table
        // ...
        // set table
        $('tr').append('<td id="1">test</td>');

        this.setSelection();
    }

    this.setSelection = function() {
       $('td').click(function() {
            alert('You clicked id ' + $(this).attr('id'));
        });
    }
}

$(document).ready(function() {
    x = new Object();
    x.init();
});