代码之家 › 专栏 › 技术社区 › Simon

向动态生成的html添加单击事件

ionic-framework typescript angular javascript

0

Simon · 技术社区 · 6 年前

在用户以纯文本形式发送url的情况下,我有一个名为 urlify 这将用html替换文本,当用户单击html以获取url时,应该将他们带到该url。

问题是,anchor元素不能在Ionic中打开URL,所以我必须使用 window.open(url) ..

这是我的密码:

urlify(text) {
  if(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        return '<span class="message-link">' + url + '</span>';
    })
  }
}

openLink(url) {
  window.open(url, '_system')
}

因此,当用户单击 span openURL 但既然我不能补充 (click)="openURL(url)" 对于动态生成的html,我不知道该怎么办。。

有什么想法吗?非常感谢。

1 回复 | 直到 6 年前

1

0

N.Tasikj 6 年前

这可以帮助您,您可以通过这种方式动态添加任何内容。

urlify(text) {
  if(text) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url) {
        let newElement = document.createElement('span');
        newElement.innerHTML = url
        newElement.classList.add('message-link');
        newElement.onclick = function() {
            window.open(url, '_system')
        }
        return newElement
    });
  }
}

document.getElementById('someDivID').append(newElement) 在这条路上