Добавление события клика в динамически генерируемый HTML

Question

Я создаю ионное приложение, которое позволяет пользователям общаться друг с другом.

В случае, если пользователь отправляет URL-адрес в виде простого текста, у меня есть функция с именем urlify, которая заменяет текст на html, и когда пользователь нажимает на html для URL-адреса, он должен перевести их на этот URL-адрес.

Проблема в том, что якорные элементы не открывают URL в Ionic, поэтому я должен использовать 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, я не уверен, что делать ..

Есть идеи? Спасибо!

Answer 1

Это может помочь вам, вы можете добавить что-нибудь динамически на этом пути.

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) таким образом