Ionic add a click function to dynamically created div

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

  }

}

asked Nov 21 '18 at 23:27

Ricardo Castañeda

2,97152237

1

Try setAttribute('onclick', 'clickCreatedDiv()')

– Kosh Very
Nov 21 '18 at 23:44

@KoshVery that makes me get the message 'clickCreatedDiv is not defined'.

– Ricardo Castañeda
Nov 21 '18 at 23:49

1

It means that onclick works, now you have to reach the function. Probably MyPage.clickCreatedDiv() would work?

– Kosh Very
Nov 21 '18 at 23:56

1

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 Very
Nov 22 '18 at 0:10

1

What string do you want to pass as an argument to clickCreateDiv? Is it the comment parameter of wrapSelection(comment)?

– ConnorsFan
Nov 22 '18 at 1:47

|
show 2 more comments

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

  }

}

asked Nov 21 '18 at 23:27

Ricardo Castañeda

2,97152237

1

Try setAttribute('onclick', 'clickCreatedDiv()')

– Kosh Very
Nov 21 '18 at 23:44

@KoshVery that makes me get the message 'clickCreatedDiv is not defined'.

– Ricardo Castañeda
Nov 21 '18 at 23:49

1

It means that onclick works, now you have to reach the function. Probably MyPage.clickCreatedDiv() would work?

– Kosh Very
Nov 21 '18 at 23:56

1

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 Very
Nov 22 '18 at 0:10

1

What string do you want to pass as an argument to clickCreateDiv? Is it the comment parameter of wrapSelection(comment)?

– ConnorsFan
Nov 22 '18 at 1:47

|
show 2 more comments

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

  }

}

asked Nov 21 '18 at 23:27

Ricardo Castañeda

2,97152237

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

  }

}

javascript angular typescript ionic-framework

asked Nov 21 '18 at 23:27

Ricardo Castañeda

2,97152237

asked Nov 21 '18 at 23:27

Ricardo Castañeda

2,97152237

asked Nov 21 '18 at 23:27

Ricardo Castañeda

2,97152237

asked Nov 21 '18 at 23:27

Ricardo Castañeda

2,97152237

asked Nov 21 '18 at 23:27

Ricardo Castañeda

2,97152237

1

Try setAttribute('onclick', 'clickCreatedDiv()')

– Kosh Very
Nov 21 '18 at 23:44

@KoshVery that makes me get the message 'clickCreatedDiv is not defined'.

– Ricardo Castañeda
Nov 21 '18 at 23:49

1

It means that onclick works, now you have to reach the function. Probably MyPage.clickCreatedDiv() would work?

– Kosh Very
Nov 21 '18 at 23:56

1

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 Very
Nov 22 '18 at 0:10

1

What string do you want to pass as an argument to clickCreateDiv? Is it the comment parameter of wrapSelection(comment)?

– ConnorsFan
Nov 22 '18 at 1:47

|
show 2 more comments

1

Try setAttribute('onclick', 'clickCreatedDiv()')

– Kosh Very
Nov 21 '18 at 23:44

@KoshVery that makes me get the message 'clickCreatedDiv is not defined'.

– Ricardo Castañeda
Nov 21 '18 at 23:49

1

It means that onclick works, now you have to reach the function. Probably MyPage.clickCreatedDiv() would work?

– Kosh Very
Nov 21 '18 at 23:56

1

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 Very
Nov 22 '18 at 0:10

1

What string do you want to pass as an argument to clickCreateDiv? Is it the comment parameter of wrapSelection(comment)?

– ConnorsFan
Nov 22 '18 at 1:47

Try setAttribute('onclick', 'clickCreatedDiv()')

– Kosh Very
Nov 21 '18 at 23:44

@KoshVery that makes me get the message 'clickCreatedDiv is not defined'.

– Ricardo Castañeda
Nov 21 '18 at 23:49

It means that onclick works, now you have to reach the function. Probably MyPage.clickCreatedDiv() would work?

– Kosh Very
Nov 21 '18 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 Very
Nov 22 '18 at 0:10

What string do you want to pass as an argument to clickCreateDiv? Is it the comment parameter of wrapSelection(comment)?

– ConnorsFan
Nov 22 '18 at 1:47

|
show 2 more comments

2 Answers
2

active

oldest

votes

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 '18 at 2:42

ConnorsFan

31k43162

Really enlightening answer, thanks.

– Ricardo Castañeda
Nov 22 '18 at 2:53

add a comment |

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 '18 at 1:01

AndrWeisR

363210

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

1

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

– AndrWeisR
Nov 22 '18 at 3:24

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421868%2fionic-add-a-click-function-to-dynamically-created-div%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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 '18 at 2:42

ConnorsFan

31k43162

Really enlightening answer, thanks.

– Ricardo Castañeda
Nov 22 '18 at 2:53

add a comment |

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 '18 at 2:42

ConnorsFan

31k43162

Really enlightening answer, thanks.

– Ricardo Castañeda
Nov 22 '18 at 2:53

add a comment |

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 '18 at 2:42

ConnorsFan

31k43162

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 '18 at 2:42

ConnorsFan

31k43162

answered Nov 22 '18 at 2:42

ConnorsFan

31k43162

answered Nov 22 '18 at 2:42

ConnorsFan

31k43162

answered Nov 22 '18 at 2:42

ConnorsFan

31k43162

Really enlightening answer, thanks.

– Ricardo Castañeda
Nov 22 '18 at 2:53

add a comment |

Really enlightening answer, thanks.

– Ricardo Castañeda
Nov 22 '18 at 2:53

Really enlightening answer, thanks.

– Ricardo Castañeda
Nov 22 '18 at 2:53

add a comment |

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 '18 at 1:01

AndrWeisR

363210

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

1

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

– AndrWeisR
Nov 22 '18 at 3:24

add a comment |

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 '18 at 1:01

AndrWeisR

363210

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

1

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

– AndrWeisR
Nov 22 '18 at 3:24

add a comment |

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 '18 at 1:01

AndrWeisR

363210

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 '18 at 1:01

AndrWeisR

363210

answered Nov 22 '18 at 1:01

AndrWeisR

363210

answered Nov 22 '18 at 1:01

AndrWeisR

363210

answered Nov 22 '18 at 1:01

AndrWeisR

363210

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

1

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

– AndrWeisR
Nov 22 '18 at 3:24

add a comment |

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

1

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

– AndrWeisR
Nov 22 '18 at 3:24

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

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

– Ricardo Castañeda
Nov 22 '18 at 2:39

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

– AndrWeisR
Nov 22 '18 at 3:24

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu