0

I know that on click is used for dynamically generated elements ... so my AJAX returns data and the link to be clicked on ... but for some reason , nothing happens .. below is my code

// jquery for the click event
    $(".back_to_followers").on('click', function(event){
       event.preventDefault();
      alert('clicked');
      $('.user_media_result').empty();
      $('.user_media_result').hide();
      $('.list_of_followers').show();
    });

and the link brought by AJAX

<a class="back_to_followers" style="color:blue; font-size:20px;" href="#"> Back to list of followers </a>
user3267381
  • 25
  • 7

1 Answers1

3

Use this:

$(document).on('click', ".back_to_followers", function(event){
   event.preventDefault();
   alert('clicked');
   $('.user_media_result').empty();
   $('.user_media_result').hide();
   $('.list_of_followers').show();
});

Your code only works on what is already loaded so you can set an event which targets the entire document or the parent element which contains the .back_to_followers and then defines the element which must be clicked: elements with .back_to_followers class.

Madnx
  • 1,532
  • 4
  • 16
  • 23
  • *"... so you have to put an event on document..."* You really need to correct that statement. – cookie monster Feb 09 '14 at 23:33
  • Oh yeah sorry I'm pretty tired... well I tried to correct it, if you have a better suggestion :) – Madnx Feb 09 '14 at 23:36
  • but I already declared the $(document) ready .. should I still select document ? – user3267381 Feb 09 '14 at 23:37
  • I tried to explain it better while editing ;). So yes, you have to select the document. $(document).ready only allow to execute the code inside when the document is "ready" (loaded). – Madnx Feb 09 '14 at 23:38
  • Yup , it worked ... but I am confused , I thought that selecting the class , then adding on click works because I did it like it before , months ago .. is this a new thing to select document for on click ??? – user3267381 Feb 09 '14 at 23:39
  • Yes, you should select `document`. `$('.selector').on(...)` will find all existing `.selector` **at the moment it is executed** and then bind the event to them. If you add any `.selector` later, they will not have the event bound to them. – acdcjunior Feb 09 '14 at 23:40
  • In fact, when you target an element directly, it applys the event on all the elements which are already loaded, not more, not less. Selecting the document and then defining which element must be targetting in it allows to select all those elements, even those which will appear later. – Madnx Feb 09 '14 at 23:41
  • Ok .. thank you , I'm accepting your answer ... You've been so helpful .. unlike many other users on here who are there to criticize and close your question .. thanks again !!! – user3267381 Feb 09 '14 at 23:43
  • Hope you understood my explanation, pretty tired right now (and I'm French so my english could be bad :p). + don't forget to indicate the answer as approved so the users can know that the problem is solved. – Madnx Feb 09 '14 at 23:44
  • Oh je parle francais aussi et ton anglais est VRAIMENT IMPECABLE !!! vous etes de Paris ? je vis en californie .. – user3267381 Feb 09 '14 at 23:45
  • Actuellement, Guadeloupe, dans 6 mois, en France (je suis au lycée :p) et oui de Paris :) ! – Madnx Feb 10 '14 at 00:05
  • You don't "have to" put it on the `document`, and in fact you shouldn't if you can avoid it. If there's some other ancestor element that is closer to the `.back_to_followers` that is present when the page loads, it should go there so that the handler isn't having to process against the entire ancestry of every single click on the page. Putting on `document` is a last resort. – cookie monster Feb 10 '14 at 00:09
  • C'est bien .. t'es deja un tres bon informaticien comme ca , c'est tres impressionant .. Moi je suis developer ici a los angeles mais je me concentre plus sur PHP , j'ai trop a apprendre sur jquery . – user3267381 Feb 10 '14 at 00:09
  • @cookiemonster yes, fixed. – Madnx Feb 10 '14 at 00:13
  • @user3267381 le PHP est aussi ce que je fais le plus, mais j'adore le javascript pour tout ce qu'on peut en faire. Sinon, comme l'a dit cookiemonster, en effet si t'as un élément parent de celui avec la classe .back_to_followers, il faut le mettre à la place de "document". C'est plus "propre". – Madnx Feb 10 '14 at 00:15
  • The power of jQuery lies at the ability to concatenate. You can combine the empty and hide statements into a single line: `$('.user_media_result').empty().hide();` – Terry Feb 10 '14 at 00:18
  • @Terry thank you .. I actually already knew , I tend to forget – user3267381 Feb 10 '14 at 00:21
  • @Codel96 C'est cool .. c'est dommage qu'on peut pas garder contact ... Javascript est bien mais ca se casse facilement , the smallest bug breaks everything .. but it's very powerful – user3267381 Feb 10 '14 at 00:23
  • Ouaip. On peut toujours garder contact. Actuellement, je suis développeur sur nintendo-master (codel) ;) ! – Madnx Feb 10 '14 at 00:35