Ionic add a click function to dynamically created div

Question

From my code I have a function that can create div elements multiple times (with surroundContents()), how can I make these created div elements to trigger a function inside the class of the very same page?

More precisely, I need that any of these div elements (created with function createDiv()) be able to trigger with click the function called clickCreatedDiv(arg) located in MyPage class and pass any string as an argument. I have tried this element.setAttribute('(click)', 'clickCreatedDiv()'); but with no success. How can I achieve this behavior?

export class MyProvider {
  wrapSelection(comment) {
    let element = document.createElement("div")
    element.setAttribute('(click)', 'clickCreatedDiv()');
    element.surroundContents(element);
  }
}

import { MyProvider } from '../../providers/my-provider';
@Component({
    selector: 'page-mypage',
    templateUrl: 'mypage.html',
}) 
export class MyPage {
  constructor(public myprovider: MyProvider) {}
  createDiv() {
    this.myprovider.wrapSelection();
  }

  clickCreatedDiv(arg) { // This is what I want to trigger with click
    alert('click ' + arg);
  }
}

@KoshVery that makes me get the message 'clickCreatedDiv is not defined'. — Ricardo Castañeda
– Ricardo Castañeda, Commented Nov 21, 2018 at 23:49
It means that onclick works, now you have to reach the function. Probably MyPage.clickCreatedDiv() would work? — Kosh
– Kosh, Commented Nov 21, 2018 at 23:56
onclick attribute function should be available from the global scope. Otherwise it would be better to set the event handler in that scope where clickCreatedDiv is available. — Kosh
– Kosh, Commented Nov 22, 2018 at 0:10
What string do you want to pass as an argument to clickCreateDiv? Is it the comment parameter of wrapSelection(comment)? — Martin Parenteau
– Martin Parenteau, Commented Nov 22, 2018 at 1:47

Martin Parenteau · Accepted Answer · 2018-11-22 02:42:07Z

1

The Angular event binding syntax (click)="doSomething()" cannot be used to set the event handler on a dynamically created HTML element. To make it work, you can pass the event handler from the MyPage class, and set it with element.addEventListener:

export class MyProvider {
  wrapSelection(eventHandler) {
    let element = document.createElement("div")
    element.addEventListener("click", () => { eventHandler("Some text"); });
    ...
  }
}

In MyPage, the event handler should be defined as an arrow function to preserve this and allow to access the class members:

createDiv() {
  this.myProvider.wrapSelection(this.clickCreatedDiv);
}

clickCreatedDiv = (arg) => {
  alert('Clicked: ' + arg);
}

See this stackblitz for a demo.

answered Nov 22, 2018 at 2:42

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Comments

AndrWeisR · Accepted Answer · 2018-11-22 01:01:22Z

1

I would pass the click function as a callback to wrapSelection. E.g. something like:

export class MyProvider {
  wrapSelection(comment, onClick) {
    let element = document.createElement("div")
    element.setAttribute('(click)', onClick);
    element.surroundContents(element);
  }
}

export class MyPage {
  constructor(public myprovider: MyProvider) {}
  createDiv() {
    this.myprovider.wrapSelection('Some comment', this.clickCreatedDiv);
  }

  clickCreatedDiv(arg) { // This is what I want to trigger with click
    alert('click ' + arg);
  }
}

answered Nov 22, 2018 at 1:01

AndrWeisR

1,27415 silver badges25 bronze badges

3 Comments

Ricardo Castañeda Over a year ago

setAttribute('(click)', onClick) generates this error: "String contains an invalid character".

Ricardo Castañeda Over a year ago

But using, setAttribute('onclick', onClick) renders this: <div onclick="function (arg) {alert('click ' + arg);}"></div>, but clicking it shows this error: function statement requires a name

AndrWeisR Over a year ago

Hmmm, what if you try: element.addEventListener("click", onClick);

Collectives™ on Stack Overflow

Ionic add a click function to dynamically created div

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related