Jquery not working after searching

[cameraki]

This could be something simple to do with
$(document).ready(function() {
but I am not sure.

DynaTable working perfectly, but after searching any jquery functions I run just dont work. They work perfectly before searching, but nothing after.

$(document).ready(function() {

    $('#suppliers-table').dynatable({
        dataset: {
            records: <?php echo json_encode($supplierAccounts) ?>,
            perPageDefault: 50
        },
        inputs: {
            processingText: 'Loading <img src="/imgs/tracking/rolling.gif" />'
        }
    });

// This works before searching, but after, doesnt register the console.log
    $(".expand-products").on("click", function(){
        console.log("clicked");
        var expand = $(this);
        if(expand.next().is(":visible")){
            expand.removeClass('fa-minus').addClass('fa-plus');
            expand.next().hide();
        } else {
            expand.removeClass('fa-plus').addClass('fa-minus');
            expand.next().show();
        }
    });
});`

Heres a section of the html
<tr> <td style="text-align: left;"> 123 <i class="fa fa-plus expand-products" aria-hidden="true"></i><div class="multipleItems"><span class="multi-items"> - Name</span></div></td><td style="text-align: left;">[email protected]</td><td style="text-align: left;"><a href="#" class="callme">020 1111 1111</a></td><td style="text-align: left;"></td><td style="text-align: left;">Link</td><td style="text-align: left;">skype</td></tr>

Anyone think of why this would be? Could it be to do with the document ready?

[dnsBlah]

This is because dynatable loads the data on

• pagination
• filter
• sorting

You need to bind your functions to the records AFTER processing

I always use the following which I figured out and is working for me :

    //Changed Records per Page change
    $(".dynatable-per-page-select").on('change', function(event) {
        processAll();
    });
    //Ordering links
    $(".dynatable-sort-header").on('click', function(event) {
        processAll();
    });
    //Search changed
    $("#dynatable-query-search-suppliers-table").on('change', function(event) {
        processAll();
    });
    function dyntablePagination()  {
         $(document).on('click', '.dynatable-page-link', function() {
             setTimeout(function(){
                 processAll();
             },0);
         });
     }

$("#suppliers-table").dynatable().on("dynatable:afterProcess", dyntablePagination());  
    function dyntablePagination()  {
         $(document).on('click', '.dynatable-page-link', function() {
             setTimeout(function(){
                 processAll();
             },0);
         });
     }


    function processAll() {
        //First unbind all unessairy elements
       $(".expand-products").unbind("click");

        //Bind the visible processed elements here, something like:
        $(".expand-products").on("click", function(){
        console.log("clicked");
        var expand = $(this);
        if(expand.next().is(":visible")){
            expand.removeClass('fa-minus').addClass('fa-plus');
            expand.next().hide();
        } else {
            expand.removeClass('fa-plus').addClass('fa-minus');
            expand.next().show();
        }
    });
    }

I have not tested it, THIS IS NOT FULLY copy-paste safe
p.s. I always trigger the process action after I binded the dyntable to my object.

var myDynatable = $('#element').dyntable({.........});
myDynatable.process();

Hopefully this will help you out :)