jQuery在動態加載的內容上運行腳本

Question

我使用AJAX請求動態加載頁面。 在這些頁面之一中，我喜歡運行字幕腳本 。

因為頁面是動態加載的，所以選取框不起作用。

我已經讀到我需要在.on直播活動中使用.on 。 我目前有這個：

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

我該如何解決才能使選取框正常工作？

Answer 1

我認為由於某些晦澀的原因，您無法在Ajax成功回調中初始化選取框...

所以這是一個出路： Mutation Observer 。

這是我改編MDN示例的代碼段，...以及我使用setTimeout“模擬” Ajax響應的代碼段。

 // 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>