How to dynamically add a link to a function


#1

Hey everyone,

I’m developing a package that will include a table in my view that values will be dynamically added to and removed from during runtime. Ideally, it will include a link in every row that when clicked upon calls a function with a value specific to the row in which the link resides. While I can add a link, clicking on it doesn’t seem to do anything. Here’s the part of my code that builds the table and a dummy function to be called:

updateTable: ->
  @list = # A list of values to be displayed in the table...
  @table = # a table visible in the view
  for value in @list by -1
    row = document.createElement('tr')
    valueCell = document.createElement('td')
    valueCell.innerHTML = value;
    row.appendChild(valueCell);
    
    linkCell = document.createElement('td')
    linkCell.innerHTML = `"<a href=\"#\" click=\"doStuff(value)\">Click me</a>"`
    row.appendChild(linkCell);
    @table.appendChild(row)
    
doStuff: (foo) ->
    console.log "Doing something with value #{foo}"

I can click on the link but the function is not called. No error or warning is display either. Can anyone point me in the right direction as to how to solve this?

Thanks in advance!