jQuery Window Resize Trigger Only Firing Once

Question

I am trying to include a slider in multiple jquery tabs but because the slider needs a width and height to display properly, I need to call window resize trigger when the tabs are changes. This code works, but only once:

jQuery(".vc_tta .vc_tta-tab, .vc_tta .vc_tta-panel-title").click(function() {
    jQuery(window).trigger("resize");
});

I've placed this outside my document.(ready) function, but it still only works once.

This is my complete script:

jQuery(document).ready(function($){
    $('.slider-<?= $name ?>').slick({
        slidesToShow: 1,
        centerMode: true,
        centerPadding: '200px',
        arrows: true,
        focusOnSelect: true,
        responsive: [
            {
                breakpoint: 800,
                settings: {
                    centerMode: false
                }
            }
        ]
    });
});

jQuery(".vc_tta .vc_tta-tab, .vc_tta .vc_tta-panel-title").click(function() {
    jQuery(window).trigger("resize");
});

I can't replicate exactly as I am using Visual Composer in WordPress, but this is the same issue: https://jsfiddle.net/keithpetrillo/d9jrgs80/

Answer 1

No need to move the function outside document.ready . Try delegating events from the document:

jQuery(document).on('click', ".vc_tta .vc_tta-tab, .vc_tta .vc_tta-panel-title", function() {
    jQuery(window).trigger("resize");
});

This works for elements that don't exist or are hidden on page load.