Jquery event not working after append html-CodePudding

I have ajax request and when the ajax success I'm replacing the content using html from the ajax response.

The controller is like this:

$html = view('payroll-cutoff.data-attendance-group', compact('payroll_group', 'payroll_cutoff_group'))->render();
return response()->json([
    'success' => true,
    'data' => $html,
]);

Inside ajax success, I have some code to manipulate the view. But somehow after I successfully replacing the html content of tbody, the jquery event not working anymore even though when I inspect the element I successfully replacing the content using html from ajax response.

 success:function(response){
         // thisObj = '.process-attendance'
         let element = response.data;
         let el_data = $(element).filter('.group-payroll').find('.body-component').html();
         thisObj.closest('table').find('tbody').html(el_data);

         // code bellow not working
         thisObj.closest('table').find('thead').addClass('done-group');
         thisObj.closest('table').find('tbody').addClass('done-group');
        },

For example is I have this on click function, but it's not working anymore after ajax success.

$(".show-emp").click(function () {
   showEmployee($(this));
});

function showEmployee(el)
{
    $(el).closest('tbody').find('.employee').toggle();
    $(el).closest('tbody').find('.employee-head').toggle();
}

And this is the view:

<table >
    <thead >
        <tr>
            <th colspan="7"></th>
        </tr>
    </thead>
    <tbody >
        <tr>
            <td style="width: 100%" colspan="7">
                <a href="javascript:void(0)" >Process Attendance</a>
                <a href="javascript:void(0)" ></a>5 Employee
            </td>
        </tr>
        <tr  style="display: none">
            <td>No</td>
            <td>Name</td>
            <td>HK</td>
            <td>IN</td>
        </tr>
        <input type="hidden"  value="">
        <input type="hidden" name="employee_id[]"  value="">
        <tr  style="display: none">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CodePudding user response：

You need to try like below snippet.

Helpful Links:
https://api.jquery.com/on/
https://api.jquery.com/click/

$(document).on("click", ".show-emp", function () {   
  showEmployee($(this));<br> 
});

CodePudding user response：

Let me know if the below's code work

$(".group-payroll").on('click', '.show-emp', function () {
   showEmployee($(this));
});

Check out the jquery documentation. There are two types of event handlers, direct and delegated. This is a delegated event handler.

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.

in your case that HTML added to the table after success is descendent elements.