click don't work after JScrollPane and Ajax

[joelmatisa]

Good morning all,
I don't know if it's me but I noticed some pretty weird behavior, when I fetch the data via ajax and I made a plugin call: $ ('. Scroll-user-table'). JScrollPane ( {
showArrows: true,
hijackInternalLinks: true,
autoReset: true,
horizontalArrowPositions: 'after',
});
After there is a jump when I try to click on an element of the content taken via ajax
It works when I click for the second time

script:

 function siteScrollPage() {
    $('.scroll-user-table').jScrollPane({
       showArrows: true,
      hijackInternalLinks: true,
      autoReinitialise: true,
      horizontalArrowPositions: 'after',
    });
};

 loader.removeClass('hidden');

  $.ajax({
    url: '',
    type: 'GET',
    data: {loaded: 'loaded'},
  })
  .done(function(response) {
    firstLoaded = false;
    $('#add-loaded-invoice').html(response);
  })
  .fail(function(response) {
  })
  .always(function(response) {
    siteScrollPage();
    siteUserPaginate();
    siteFirstTimeLoadedInvoiceLivraison();
    loader.addClass('hidden');
  });

[illuusio]

Can you make some example site for this I can see the 'jump' as I can't reproduce.

[joelmatisa]

Just for precision this jump, I do when I scroll, as if I lose my hand on my dom

[illuusio]

Just for precision this jump, I do when I scroll, as if I lose my hand on my dom

Sorry as non-native speaker I didn't quiet get what you mean? Is problem that calculation of line is or place is not correct..

[joelmatisa]

I will be much clearer the problem is that I load a table via ajax (jquery) whose cells can contain links, buttons or dropdwons and now if I click on an item when the table is loaded if I click on a link which is in a cell that pops up everything works fine but when I scroll to see the other items the links don't work directly and takes you to the start of the scroll you have to click multiple times for it to work.

[illuusio]

Ok looks like the problem that I tried to solve with last RC. Do you have small HTML for debug?

[joelmatisa]

This is the code I am loading via ajax, so the link and select (tag) at the bottom is not working well (as described above).

  <tbody class="text-sm tbody-category" id="tbody-category">
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2">110-00-4</td>
    <td nowrap class="px-4 py-2">Lorem ipsum dolor sit</td>
    <td nowrap class="px-4 py-2"><a href="https://www.google.com" class="">google</a></td>  
    <td nowrap class="px-4 py-2">
      <select>
        <option>1</option>
        <option>2</option>
      </select>
    </td> 
  </tbody>

Code commande	Date commande	Heure commande	Nombre d'articles	Montant panier	Montant livraison	Paiement total commande	Moyen de paiement	Statut paiement	Livreur	Type de livraison	Statut livaison	Date Récupéré	Heure Récupéré	Date Livré	Heure Livré	Client	Marchand	Options	Code commande	Date commande	Heure commande	Nombre d'articles	Montant panier	Montant livraison	Paiement total commande	Moyen de paiement	Statut paiement	Livreur	Type de livraison	Statut livaison	Date Récupéré	Heure Récupéré	Date Livré	Heure Livré	Client	Marchand	Options	Code commande	Date commande	Heure commande	Nombre d'articles	Montant panier	Montant livraison	Paiement total commande	Moyen de paiement

[illuusio]

Thanks I try to get time to take a look this next week or after that.

[joelmatisa]

Thank you come back to me soon

[joelmatisa]

Hello @illuusio, I still haven't had a follow-up on our last exchange

[illuusio]

Yes you are correct. I was more optimistic about this week and everything didn't go as I planned so this will be dealed in couple weeks. This is kind of hobby to maintain this so time what I can spend with this is very limited.