Как добавить прослушиватель событий в HTML, сгенерированный объектной моделью javascript

Question

<div class="target">

</div>

<script>
    class Shape {
        constructor (id, x, y) {
            this.id = id
            this.x = x
            this.y = y
            this.display()
        }

        display() {
            return 
            `
            <div class="square">
                <button class="square-button"></button>
            </div>
            `
        }
    }

    var square = new Shape(0, 5, 5);

    $('.target').html(square.display());
</script>

Я хочу добавить прослушиватель событий для кнопки, которая будет генерироваться каждым экземпляром Shape.Как бы я поступил так?

Answer 1

Использовать документ jquery для события, например

$(document).on('click', '. square-button', handler)

function handler() {
  var $that = this; // the button which was click
  // do stuff etc...
}

Answer 2

Хотя вы можете использовать встроенный обработчик с минимальными корректировками текущего кода, это довольно плохая практика - вместо этого создайте элемент HTML (а не просто строку) и присоедините к нему слушатель:

class Shape {
  constructor(id, x, y) {
    this.id = id
    this.x = x
    this.y = y
    this.display()
  }

  display() {
    const sq = $(`
            <div class="square">
                <button class="square-button">button</button>
            </div>
    `);
    sq.on('click', 'button', () => console.log('click'));
    return sq;
  }
}

var square = new Shape(0, 5, 5);

$('.target').append(square.display());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="target">

</div>