Modal search_person returns nothing when changes Javascript page

Question

Good morning

I’m using a paginated modal with datatable, and when I search or change page the function stops to add the person in the main page.

Javascript function

$(function() {
    $('.add').click(function(e) {
        e.preventDefault();


        var vId = $(this).parent().parent().find("#id").text();
        var vPessoa = $(this).parent().parent().find("#pessoa").text();

        //alert(vId + '/' + vPessoa)      

        $('#idforn01').attr('value', vId);
        $('#forn01').attr('value', vPessoa);
        // document.getElementById('forn01_teste').innerHTML = vPessoa;

    });
});

Answer 1

When you change the DOM as you described it, the javascript "fails to recognize" his class .add in the "modified" elements, since he understands that it is a new element created.

You need to delegate your click to an element above and inform the element to be created, ie, look for an element FATHER that covers your datatables list and that it is not modified, and use it.

So change your code:

$('.add').click(function(e){ 
   e.preventDefault();
   ...
})

To:

$([elemento_pai]).on('click', '.add', function(e){ 
   e.preventDefault();
   ...
})