将单击函数添加到动态创建的div
将单击函数添加到动态创建的div
提问于 2018-11-21 23:27:36
从我的代码中，我有一个函数可以多次创建div元素(使用surroundContents())，如何使这些已创建的div元素在同一个页面的类中触发一个函数？
更准确地说，我需要这些div元素中的任何一个(使用函数createDiv()创建)能够通过单击位于MyPage class中的名为clickCreatedDiv(arg)的函数触发并传递任何字符串作为参数。我试过这个element.setAttribute('(click)', 'clickCreatedDiv()');，但没有成功。我怎样才能达到这种行为呢？
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);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-11-22 02:42:07
角事件绑定语法(click)="doSomething()"不能用于在动态创建的HTML上设置事件处理程序。要使其工作，可以从MyPage类传递事件处理程序，并使用element.addEventListener设置它。
export class MyProvider {
wrapSelection(eventHandler) {
let element = document.createElement("div")
element.addEventListener("click", () => { eventHandler("Some text"); });
...
}
}在MyPage中，事件处理程序应该定义为一个箭头函数，以保留this并允许访问类成员：
createDiv() {
this.myProvider.wrapSelection(this.clickCreatedDiv);
}
clickCreatedDiv = (arg) => {
alert('Clicked: ' + arg);
}有关演示，请参见这一堆闪电战。
Stack Overflow用户
发布于 2018-11-22 01:01:22
我将把click函数作为回调传递给wrapSelection。例如，类似：
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);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53421868
复制相关文章
相似问题
腾讯云开发者
