Javascript wont work on elements generated with this plugin

Resolved

(@ul71m0)

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://ww.wp.xz.cn/plugins/ajax-load-more/

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

Plugin Author

Darren Cooney

(@dcooney)

11 years, 7 months ago

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

(@ul71m0)

11 years, 7 months ago

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

(@dcooney)

11 years, 7 months ago

For toggle content, you won’t need the complete function.

Try my code sample above.

Thread Starter

ul71m0

(@ul71m0)

11 years, 7 months ago

Your sample isn`t working, this one i pasted with complete functions does the trick, im happy with it.

Plugin Author

Darren Cooney

(@dcooney)

11 years, 7 months ago

Ok perfect!

Thread Starter

ul71m0

(@ul71m0)

11 years, 7 months ago

Thanks for help, i resolved topic!

Thread Starter

ul71m0

(@ul71m0)

11 years, 7 months ago

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

(@ul71m0)

11 years, 7 months ago

So on every new ajax load it adds one more iteration of toggle for example…

Thread Starter

ul71m0

(@ul71m0)

11 years, 7 months ago

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

(@dcooney)

11 years, 7 months ago

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.