jQuery click event on ajax load [duplicate]

  html, javascript, jquery

I have a basic table looking like:

        <table class="table table-sm table-striped">
        <thead>
        <tr>
            <th scope="col">userId</th>
            <th scope="col">Firstname</th>
            <th scope="col">Lastname</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
            <!--Filled in with ajax-->
        </tbody>
    </table>

Javascript code: (data is loaded from database)

$('table tbody').append('<tr><td>'+userId+'</td><td>'+firstname+'</td><td>'+lastname+'</td><td class="details">Details</td></tr>')

Now when I click on Details, it should be called the click event:

$(".details").click(function () {
    console.log("test")
})

But nothing happen. What can it be? Is it because I am loading it with javascript?

Source: Ask Javascript Questions

LEAVE A COMMENT