Link not clickable in dynamically added (JQuery) row of list in HTML

Question

I am building a chatbot that provides a link on occasion (using the Chatterbot package as a base). The link comes from python code to my HTML file from where a row is appended to the existing list using JQuery. My problem is that this link does not show up as clickable. I have tried JavaScript link() and html(). I have also tried Anchorme, Autolinker and Linkify.

This is where I am receiving the output from the chatbot:

$submit.done(function(statement) {
    createRow(statement);

And this is the code for the row creation using JQuery:

function createRow(text) {
var $row = $('<li class="list-group-item"></li>');
$row.text(text);
$chatlog.append($row);
}

This is what the output looks like.

screenshot

`$row.html(text)` should work. What does `console.log(text)` show? — Barmar, Mar 23 '18 at 13:18
Be aware that setting HTML from something that can contain user input is fairly dangerous in terms of XSS. — H.B., Mar 23 '18 at 13:21
Here is a fiddle to play with : https://jsfiddle.net/pcyf1x2c/7/ — Shwrk, Mar 23 '18 at 13:31

score 1 · Accepted Answer · answered Mar 23 '18 at 13:19

1

$row.html(text) should work if the image is anything to go by.

answered Mar 23 '18 at 13:19

H.B.

166,899
29
327
400

This worked for me. The mistake I was making was trying $row.text(text).html() which I got from https://stackoverflow.com/a/374176/9521089. – Angad Singh Mar 23 '18 at 14:40

Link not clickable in dynamically added (JQuery) row of list in HTML

1 Answers1