无限滚动（infinite-scroll）追加DOM失败及样式设置问题求助

Hey there, let’s figure out why your video styling isn’t working when using infinite scroll, and fix it for good!

The Core Problem #

When you use $("video").css(...) directly, it only targets already existing video elements in the DOM. Any videos added later via infinite scroll won’t be picked up. The load event approach didn’t work because load events don’t bubble, so event delegation (like you used for mouse events) won’t catch them on new elements.

Solution 1: Use Infinite Scroll’s Built-in Callback (Most Reliable) #

Virtually all infinite scroll plugins provide a callback that triggers right after new content is appended to the DOM. This is the best place to apply styles to your new videos, since you know exactly when they’re available.

Here’s how to implement it (adjust based on your plugin’s actual syntax):

// Initialize infinite scroll with a post-load callback
$('.your-scroll-container').infiniteScroll({
  path: '.next-page-link', // Your pagination link selector
  append: '.content-item', // The elements being appended
  status: '.load-status' // Optional: for loading states
}, function(newElements) {
  // newElements contains all the freshly added DOM nodes
  $(newElements).find('video').css({
    'width': '580px',
    'height': '432px'
  });
});

Solution 2: Mutation Observer (Modern & Performant) #

If you can’t use the plugin’s callback, a Mutation Observer lets you listen for changes to the DOM and apply styles as soon as new videos are added. This is more efficient than older DOM events like DOMNodeInserted.

// Target the container where new content is appended
const scrollContainer = document.querySelector('.your-scroll-container');

// Configure the observer to watch for added child nodes
const observerConfig = { childList: true, subtree: true };

// Callback to handle new elements
const handleNewContent = (mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      // Check if the new node is a video, or contains videos
      if (node.tagName === 'VIDEO') {
        $(node).css({'width':'580px','height':'432px'});
      } else if (node.querySelector) {
        const videosInNode = node.querySelectorAll('video');
        videosInNode.forEach(video => $(video).css({'width':'580px','height':'432px'}));
      }
    });
  });
};

// Initialize and start observing
const observer = new MutationObserver(handleNewContent);
observer.observe(scrollContainer, observerConfig);

// To stop observing later (if needed): observer.disconnect();

Solution 3: Fallback with DOMNodeInserted (Older Browsers) #

For older browsers that don’t support Mutation Observers, you can use the DOMNodeInserted event (note: this has minor performance implications, so use it only as a last resort):

$(document).on('DOMNodeInserted', 'video', function() {
  $(this).css({'width':'580px','height':'432px'});
});

Why Your Previous Attempts Failed #

• Direct $("video").css(...) only affects existing elements, not dynamically added ones.
• The load event doesn’t bubble, so event delegation (using .on('load', 'video', ...)) won’t work for new videos.
• Mouse events worked because they do bubble, so event delegation catches them on any matching element (even new ones).

内容的提问来源于stack exchange，提问作者lin