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

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

  •  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) 在这条路上

    推荐文章