0

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?

Nanog000
  • 59
  • 5
  • 2
    You have to use event delegation `$(document).on('click', ".details", function ()` – Carsten Løvbo Andersen Mar 04 '21 at 11:32
  • Thx it works fine with your solution. Is there a reason why its not working with jquery? – Nanog000 Mar 04 '21 at 11:36
  • 2
    When this code is loaded `$(".details").click(function () {` it bind the click event to every element with the class `details` but at that point your ajax haven't added `$('table tbody').append(''` so they would not get the binding of the click event. – Carsten Løvbo Andersen Mar 04 '21 at 11:42

0 Answers0