调用rollerblade.js插件遇问题：点击图片仅生效一次，修改HTML后失效

Hey there! Let's dig into why your rollerblade.js plugin is acting up—it sounds like a classic case of event binding quirks or the plugin's internal state getting stuck after the first run. Here are practical fixes you can test out:

1. Switch to event delegation for dynamic DOM elements #

A lot of plugins bind events directly to elements on initial load, which means any new images you add to the HTML later won't have those events attached. Using event delegation on a parent container solves this because it listens for clicks at a higher level, regardless of whether the image was there from the start or added later:

// Pick a stable parent container that won't get removed from the DOM
document.querySelector('.image-wrapper').addEventListener('click', function(e) {
  // Only trigger if the clicked element is an image
  if (e.target.tagName === 'IMG') {
    // Call your rollerblade logic on the specific clicked image
    runRollerblade(e.target);
  }
});

2. Reset the plugin's internal state before re-running #

Some plugins track an "initialized" flag internally—once it's set to true, subsequent calls get ignored. If the plugin exposes a destroy or reset method, use that to clear the old state before reinitializing:

function runRollerblade(imgElement) {
  // Clean up existing plugin instance if it exists
  if (typeof rollerblade.destroy === 'function') {
    rollerblade.destroy();
  }
  // Re-initialize the plugin on the clicked image
  rollerblade.init(imgElement);
}

If the plugin doesn't have a destroy method, you can work around it by cloning the image (which removes old event bindings and state) and replacing the original:

imgElement.addEventListener('click', function() {
  const freshImg = this.cloneNode(true);
  this.parentNode.replaceChild(freshImg, this);
  // Bind the click event to the new image and run the plugin
  freshImg.addEventListener('click', () => runRollerblade(freshImg));
  rollerblade.init(freshImg);
});

3. Target only the clicked image (not global elements) #

Avoid calling a global rollerblade.init() that targets all images every time. Instead, explicitly pass the clicked image to the plugin to prevent conflicts with previous instances:

// Bad: Runs the plugin on all images every click
// rollerblade.init();

// Good: Runs the plugin only on the clicked image
imgElement.addEventListener('click', function() {
  rollerblade.init(this);
});

Start with event delegation first—it's the most reliable fix for dynamic DOM changes. If that doesn't work, check the plugin's documentation for destroy/reset methods to clear old state.

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