Title: Javascript wont work on elements generated with this plugin
Last modified: August 22, 2016

---

# Javascript wont work on elements generated with this plugin

 *  Resolved [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * (@ul71m0)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/)
 * Hi
 * i have installed plugin and it works fine, i places my repeater template and 
   im getting output that i need, only issue i have is that jquery functions wont
   work when this plugin generates markup.
 * It just simple addClass and slideToggle, but its not working.
 * Here is my repeater code:
 *     ```
       <div class="row success">
                                           <div class="col-sm-4 no-pad-r img-toggle">
                                               <?php the_post_thumbnail(); ?>
                                           </div>
                                           <div class="col-sm-6 col-sm-offset-1 no-pad-l">
                                               <h4 class="heading-toggle"><?php the_title(); ?></h4>
                                               <div class="line"></div>
                                               <p class="intro">"<?php the_field('first_line'); ?>."</p>
                                               <div class="toggle-content" style="display: none">
                                                   <div class="main-copy"> <?php the_content(); ?></div>
                                                   <h5><?php the_field('author_name'); ?></h5>
                                                   <p class="position"><?php the_field('author_position'); ?></p>
                                               </div>
                                               <button class="btn toggle btn-danger"></button>
                                           </div>
                                       </div>
       ```
   
 * And here is my javascript, im loading it from external file, and everything works
   when i manually add elements with my query for custom posts, but when using shortcode
   it wont work.
 *     ```
       $(document).ready(function() {
                   $( ".toggle" ).click(function() {
                       $(this).prev( ".toggle-content" ).slideToggle();
                       $(this).closest( ".success" ).toggleClass( "highlight" );
                       $(this).toggleClass( "open" );
                   });
             });
       ```
   
 * There is no errors in console.
 * [https://wordpress.org/plugins/ajax-load-more/](https://wordpress.org/plugins/ajax-load-more/)

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478221)
 * You willneed to use the .on() function when loading dynamic items.
 *     ```
       $( ".toggle" ).on('click', function() {
           $(this).prev( ".toggle-content" ).slideToggle();
           $(this).closest( ".success" ).toggleClass( "highlight" );
           $(this).toggleClass( "open" );
       });
       ```
   
 *  Thread Starter [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * (@ul71m0)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478222)
 * Hey after posting here i did more research and found solution:
 *     ```
       $.fn.almComplete = function(alm){
               $( ".toggle" ).click(function() {
                   $(this).prev( ".toggle-content" ).slideToggle();
                   $(this).closest( ".success" ).toggleClass( "highlight" );
                   $(this).toggleClass( "open" );
               });
               $( ".heading-toggle" ).click(function() {
                   $(this).siblings( ".toggle-content" ).slideToggle();
                   $(this).closest( ".success" ).toggleClass( "highlight" );
                   $(this).siblings('.btn').toggleClass( "open" );
               });
               $( ".img-toggle" ).click(function() {
                   $(this).next('.col-sm-6').children( ".toggle-content" ).slideToggle();
                   $(this).closest( ".success" ).toggleClass( "highlight" );
                   $(this).next('.col-sm-6').children('.btn').toggleClass( "open" );
               });
           }
       ```
   
 * Is this correct way?
 * And thanks for fast response.
 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478223)
 * For toggle content, you won’t need the complete function.
 * Try my code sample above.
 *  Thread Starter [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * (@ul71m0)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478224)
 * Your sample isn`t working, this one i pasted with complete functions does the
   trick, im happy with it.
 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478225)
 * Ok perfect!
 *  Thread Starter [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * (@ul71m0)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478226)
 * Thanks for help, i resolved topic!
 *  Thread Starter [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * (@ul71m0)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478230)
 * Oh but i have other problem now, because im using 3 shortcodes on page ( 3 tabs)
   when i click on one button it does action 2 times, and that is only on first 
   2 tabs, on third tab everything works normal.
 * It was working fine when i had only 1 shortcode.
 * So when i click button element opens and instantly closes straight away…
 *  Thread Starter [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * (@ul71m0)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478245)
 * So on every new ajax load it adds one more iteration of toggle for example…
 *  Thread Starter [ul71m0](https://wordpress.org/support/users/ul71m0/)
 * (@ul71m0)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478266)
 * Got it working with this, so im sharing solution if someone else get stuck with
   this:
 *     ```
       $(".ajax-load-more-wrap").on("click",".toggle",function() {
               $(this).prev(".toggle-content").slideToggle();
               $(this).closest(".success").toggleClass("highlight");
               $(this).toggleClass("open");
           })
           $(".ajax-load-more-wrap").on("click",".heading-toggle",function() {
               $(this).siblings(".toggle-content").slideToggle();
               $(this).closest(".success").toggleClass("highlight");
               $(this).siblings('.btn').toggleClass("open");
           })
           $(".ajax-load-more-wrap").on("click",".img-toggle",function() {
               $(this).next('.col-sm-6').children(".toggle-content").slideToggle();
               $(this).closest(".success").toggleClass("highlight");
               $(this).next('.col-sm-6').children('.btn').toggleClass("open");
           })
       ```
   
 * Needed to target existing div, not one that was loaded with AJAX.
 *  Plugin Author [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * (@dcooney)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478294)
 * Ok, nice work! Glad it’s working for you.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Javascript wont work on elements generated with this plugin’ is closed
to new replies.

 * ![](https://ps.w.org/ajax-load-more/assets/icon-256x256.png?rev=2944639)
 * [Ajax Load More – Infinite Scroll, Load More, & Lazy Load](https://wordpress.org/plugins/ajax-load-more/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ajax-load-more/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ajax-load-more/)
 * [Active Topics](https://wordpress.org/support/plugin/ajax-load-more/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ajax-load-more/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ajax-load-more/reviews/)

 * 10 replies
 * 2 participants
 * Last reply from: [Darren Cooney](https://wordpress.org/support/users/dcooney/)
 * Last activity: [11 years, 7 months ago](https://wordpress.org/support/topic/javascript-wont-work-on-elements-generated-with-this-plugin/#post-5478294)
 * Status: resolved