0

Bit new to Java-script so let me explain my problem. I have implemented pagination using Django and using Infinitescroll.js for pagination in Front-end.

Now I want to attach an click-event listener to elements of a class on the page. I can do.

$(".class").on("click", 
  function(){
  alert("1234")
});

First page of Pagination is working fine. But for next page the listener is not getting attached. I tried keeping above js in $(document).ready but still it's not working. How can I add listeners to new elements of the same class that are being loaded after pagination. Do I need to put the above code in callback function of the infinitescroll.js?

Coderaemon
  • 3,123
  • 4
  • 21
  • 45
  • 3
    There are hundreds of same questions in SO, but once again: use delegated event handlers. Something like `$(document).on("click", ".class", function() {` or with static parent selector instead of `document` – Regent Nov 07 '14 at 13:41
  • Mate thanks! Put it in answer I will accept it. – Coderaemon Nov 07 '14 at 13:47
  • I read this concept somewhere but today I realised it's importance. Thanks again. Event Delegation. – Coderaemon Nov 07 '14 at 13:48
  • You're welcome. It's actually not worth to be an answer. Furthermore, question is already marked as duplicate, so I wouldn't be able to post an answer even if I want to :) You can read about delegated events in [docs](http://api.jquery.com/on/#direct-and-delegated-events). – Regent Nov 07 '14 at 13:51

0 Answers0