jQuery object-oriented created dom element and add event listener

Question

I have a little problem. I've created some element in an object and that works fine. But now I want to add some EventListeners to execute a function inner my object, the problem is that I cannot execute the function "setSelection". ("this" is not the "this" of the object, but the "this" of the event inner the click-function).

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();
});

it can lead to problems to override the Object function, if you know what you are doing, fine, or else, you should rename it. For your problem, what causes this is that event callbacks are executed in the global context. This is why the proposed answers work, you need either to store the context in a var, or use functions as bind, apply or such to get the context back — Kaddath
– Kaddath, Commented Jan 19, 2017 at 14:56

Rory McCrossan · Accepted Answer · 2017-01-19 14:48:36Z

1

You can fix this by storing the reference of this in the outer scope to a variable that you can use in the click event handler:

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);
    }
}

answered Jan 19, 2017 at 14:48

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Igor · Accepted Answer · 2017-01-19 14:50:13Z

1

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

edited Jan 19, 2017 at 14:50

answered Jan 19, 2017 at 14:48

Igor

15.9k1 gold badge29 silver badges34 bronze badges

1 Comment

Rory McCrossan Over a year ago

This would work, but it would mean that you would need to use e.target to get a reference to the td which was clicked, if needed.

Daniel · Accepted Answer · 2017-01-19 14:55:23Z

0

My approach will be:

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);
  }
}

answered Jan 19, 2017 at 14:55

Daniel

1968 bronze badges

Comments

Hendel Jo · Accepted Answer · 2017-01-19 14:55:36Z

0

I've solved the problem...

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();
});

answered Jan 19, 2017 at 14:55

Hendel Jo

213 bronze badges

1 Comment

Igor Over a year ago

This is not a solution to your question. And this is wrong - every call of setSelection adds a new click handler to td elements. All these handlers will be executed in sequence the next time your click.

Collectives™ on Stack Overflow

jQuery object-oriented created dom element and add event listener

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related