Event Callback Inside Template Literal

Question

Hi everyone I'm new to javascript and I'm trying to execute a callback function on the user's click event using template literals. However the callback is being executed on the template's evaluation.

The row method is called by another class which is passing the item and the callback function.

 class Clazz { row(item, deleteCallback){ return `<a href="#" onClick="${deleteCallback(item.requestId)}"></a>` } }

Can anyone help me ?

Answer 1

I think a better approach to what you're trying to achieve is to return an element from row instead of an HTML string. Like so:

class Clazz {
  row(item, deleteCallback){
    const a  = document.createElement('a');
    a.href = '#';
    a.onclick = () => deleteCallback(item.requestId);
    return a;
  }
}

This could then be added to the DOM using append , after or something similar.