How to add event listener to HTML generated by javascript object model

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>

I want to add an event listener to the button that will be generated through each Shape instance. How would I go about doing this?

CertainPerformance · Accepted Answer · 2019-02-25 03:05:22Z

1

Although you can use an inline handler with minimal adjustments to your current code, they're pretty bad practice - instead, create the HTML element (not just a string), and attach the listener to it:

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>

answered Feb 25, 2019 at 3:05

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

Comments

lacostenycoder · Accepted Answer · 2019-02-25 03:06:37Z

0

Use jquery document on event for example

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

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

answered Feb 25, 2019 at 3:06

lacostenycoder

11.3k4 gold badges37 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to add event listener to HTML generated by javascript object model

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related