jQuery run script on dynamically loaded content

Question

I load my pages dynamically using AJAX requests. In one of these pages I like to run a marquee script .

Because the page is dynamically loaded, the marquee does not work.

I've read that I need to use .on for live events like these. I currently have this:

$(document).on('load', '.marquee', function(event){
    $('.marquee').marquee({
        duration: 25000,
        startVisible: true,
        duplicated: true,
        gap: '5px'
    });
});

How can I resolve this to get the marquee working?

Answer 1

I assume you cannot initialise marquee in the Ajax success callback for some obscure reason...

So here a way out: Mutation Observer .

Here is a snippet where I adapted the MDN example... And where I "simulate" an Ajax response using a setTimeout.

 // Marquee init function function MarqueeInit(element){ element.marquee({ duration: 25000, startVisible: true, duplicated: true, gap: '5px' }); } // On load, init the static marquee. MarqueeInit($('.marquee')); // Simulating an Ajax response var marqueeString = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus elit magna, non lacinia orci placerat non. Nunc cursus vestibulum orci. Fusce dapibus augue id."; setTimeout(function(){ $(".dynamic").append(marqueeString); },2000); // Applying a Mutation Observer on the destination div var targetNode = $(".dynamic")[0]; var config = { attributes: true, childList: true, subtree: true }; var callback = function(mutationsList) { for(var mutation of mutationsList) { if (mutation.type == 'childList') { console.log('A child node has been added or removed.'); // IMPORTANT! // Stop observing NOW because the marquee initialization will start an inifinite loop. observer.disconnect(); // Init Marquee! MarqueeInit($(".dynamic")); } } }; // Create an observer instance var observer = new MutationObserver(callback); observer.observe(targetNode, config); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script> <h1>Static marquee</h1> <div class="marquee"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra tellus a sem feugiat, vel blandit ipsum dignissim. Nam tincidunt placerat risus, et pretium ligula tempus id. Nulla tristique, arcu in euismod fringilla, odio erat venenatis arcu, id luctus turpis lorem vel massa. Curabitur at diam eget sem posuere dictum. Sed elementum placerat velit, eget bibendum velit lacinia sed. Nam commodo magna at gravida sodales. Vestibulum at eleifend augue, at condimentum ante. </div> <br> <h1>Dynamic marquee</h1> <div class="dynamic"> </div>