[SOLVED] Methods not working on elements loaded with AJAX

Hello, it’s me again.

I’ve been trying to figure this out for days but for I just can’t understand why. I have this code:

<div class="page-content infinite-scroll-content ptr-content" data-ptr-distance="55">

            <div class="ptr-preloader">
              <div class="preloader"></div>
              <div class="ptr-arrow"></div>
            </div>

              <div class="block app-feed main-feed">
                <div class="row"><div class="col"><h2><a class="link external" href="#">First Item</a></h2></div></div>
              </div>

            <div class="preloader infinite-scroll-preloader"></div>
          </div><!--page content-->

As the user scrolls the app will do an AJAX call and append new rows to .app-feed so will be more items after First Item. Now the problem - I have this code:

$$('a').on('click', function (e) {
  alert('clicked');
  $$(this).css("color","red");
});

Of course it’s supposed to trigger when I click on the any of the items (or any link for that matter) but for some reason I can’t figure out, it’s just not happening on those that were loaded through AJAX, but it does for the first item when they basically have the same HTML. :confused:

Help please? I really need to resolve this.

Thanks! :slightly_smiling_face:

maybe it’s the location of your code that causes bug. If your code executes before or after the DOM loading, or in a different route… Typically, if you push to refresh for making the content appear, appearing content is not loaded yet.

Hmmm… What do you think I should do? As far as I know the links are in the DOM. :confused: I placed the code below inside $$(document).on(‘page:init’, ‘.page[data-name=“home”]’, function (e) {}) but it’s still the same.

$$('a').on('click', function (e) {
  alert('clicked');
  $$(this).css("color","red");
});

are you using routes ?

Yes I am. Nothing special about it, though:

{
    path: '/',
    url: './index.html',
  },
  {
    path: '/about/',
    url: './pages/about.html',
  },
  {
    path: '/me/',
    url: './pages/me.html',
  },

Can you show us how your ajax call looks like?
This sounds to me like you are not binding the click events in the success callback but right after the call itself which won’t work because the call is done asynchroniously.

1 Like

Hi @Frooplet, sorry for not getting back to you sooner but thanks for giving me the idea! :slight_smile: It works great now.

Hi @Timidyo, can you show me how you manage it to work? I’m having the same problem here…

Thanks!

Hello @mayconedinger, not sure if I remember it correctly (totally forgot to paste the code that worked for me) but I may have added the code inside the AJAX call’s success callback. Something like this:

Framework7.request({
  url: 'http://example.com/feed.php',
  method:'POST',
  dataType: 'json',
  data: { leftIndex: leftIndex, itemsAmount: itemsAmount},
  crossDomain: 	true,
  success: function(data, textStatus ){

$('a').on('click', function (e) {
  alert('clicked');
  $(this).css("color","red");
});

  },
  error: function(xhr, textStatus, errorThrown){
  app.dialog.alert('Error getting feed. Reason: '+textStatus);
  }
  });

Thanks @Timidyo IT WORKED !!! You save my day!

LOL I wish I can take the credit but it was all @Frooplet’s idea. Glad you sorted it out though!