document.ready not working with ajax loaded content

ajax, jquery

Solution

You need to use on() to bind click event for dynamically loaded elements. You can delegate the event to parent element to which elements added dynamically or to document otherwise.

$(document).ready(function(){ 
     $(document).on("click", ".sharing-mp", function() {     
         $(".sharing-mp").toggleClass('sharing-mp-hidden').toggleClass('sharing-mp-visible');    
     });    
});

Problem

I'm using ajax to load in posts on a WordPress site. Inside each post I have a hidden div with sharing buttons, which is unhidden with a jquery toggleClass function. It's really simple. ``` $(document).ready(function(){ $(".sharing-mp").click(function() { $(".sharing-mp").toggleClass('sharing-mp-hidden').toggleClass('sharing-mp-visible'); }); }); ``` The problem is, it doesn't work on posts that are loaded in with ajax, I guess because they're being appended to the DOM and the .ready function isn't finding them? Is there some other way to do it?

Original source