How to call function onClick event using ajax?

Question

This is the piece of code working and get ajax response suceessfully but onclick not working,

     $.ajax({
            type:"POST",
            url:"http://localhost:3000/insert",
            data:data3,
            success:(data)=>
            {
                 let  table = '';
                 for(let i=0; i < data.length; i++)
                  {
                     table +=`<tr><td><a href="javascript:void(0)" 
                      onclick=myFun(${data[i].email})>Click</a></td></tr>`;                        
                  }
                   document.getElementById("users").innerHTML=table;
               },error: function(jqXHR, textStatus, err) {
                alert('text status '+textStatus+', err '+err)
                console.log("err")
            }
    })
})    '
const myFunc=()=>{
                 alert("working") 
                 }        

Whereas following is working,

<a href="javascript:void(0)" onclick=myFun()>Click</a>

Answer 1

Use a delegated event handler bound to the container :

html codes :

<span id="users"></span>

javascript codes :

document.getElementById("users").innerHTML=
'<a href="#" class="click-me">Click</a>';


document.querySelector('a.click-me').addEventListener('click', function(e) {
    e.preventDefault();
  console.log(11)
});

Answer 2

function myFun() {

    $.ajax({
        type: 'POST',
        url: 'file_product.php',
        data: "param1=" + param1,
        success: function(data) {

        }
    });

}

Answer 3

It works for me,

 let table = '<table>'; for(let i=0; i < 5; i++) { table +='<tr><td><a href="javascript:void(0)" onclick=myFun(' + i + ')>Click</a></td></tr>'; } table += '</table>'; document.getElementById("users").innerHTML= table; function myFun(){ console.log('my func'); } 

 <div id='users'></div>