Как перенести функцию добавления обработчика в объект?

Question

[DTX]

codepen.io/anon/pen/gMOrwa

1) Есть:

$('div:first-child').click(function () {
  console.log(this);
  obj.foo1();
});

Хочется перенести это в obj.init():

var obj = {
  div: $('div'),
  init: function() {
    $('div:nth-child(2)').click(function () {
      counter++;
      this.div.text(counter);
    });
  }
};

Ключевой момент:

this.div.text(counter);

Можно как-нибудь провернуть? Чтобы в обработчике клика был контекст объекта?

2) Почему не работает :last-child селектор?

$('div:last-child').click(function () {
  alert(1);
  obj.foo1();
});

Comments

[OVK2015]

По п.1 Попробуйте добавить в объект переменную that = this, а внутри метода: that.div.text(counter); И в методе counter то изначально не определен

Answer 1

[Алексей Уколов]

var obj = {
  div: $('div'),
  onClick: function () {
      counter++;
      this.div.text(counter);
  },
  init: function() {
    $('div:nth-child(2)').click(this.onClick.bind(this));
  }
};

Почему не работает :last-child селектор?

https://jsfiddle.net/5jrpsxnd/1/

Comments

[DTX]

Ммм, не пойму, что с моим last-child не так?
За bind спасибо!

Answer 2

[DTX]

Сейчас случайно обнаружил, что для моего случая отлично подходят стрелочные функции:

var obj = {
  div: $('div'),
  init: function() {
    $('div:nth-child(2)').click(() => {
      counter++;
      this.div.text(counter);
    });
  }
};