Vue.js中如何动态同步输入框ID与转写ID？解决转写失效问题

Hey there! I totally get this frustration—dynamic elements can be tricky when you're just starting out with JavaScript. Let's break down why your transliteration stops working after the first input, and fix it step by step.

The Root of the Problem #

You’re likely using a fixed, repeated ID to attach your transliteration logic, and here’s why that breaks things:

• IDs must be unique on a single HTML page. When you add new inputs with the same ID, getElementById() only ever returns the first matching element.
• Event listeners set up on page load only apply to elements that exist at that moment. Any inputs you add later won’t have those listeners attached automatically.

Solution 1: Use Event Delegation (Recommended) #

Event delegation lets you attach a single listener to a parent container, which will catch events from all its child elements—even ones added dynamically. This is efficient and clean.

Step-by-Step Code #

First, update your dynamic input creation to use a class instead of a repeated ID:

// Assume your "add input" button has an ID of "add-input"
const addBtn = document.getElementById('add-input');
const inputContainer = document.getElementById('input-container'); // Parent for all inputs

addBtn.addEventListener('click', function() {
  const newInput = document.createElement('input');
  newInput.classList.add('transliterate-input'); // Use a class instead of duplicate ID
  newInput.placeholder = 'Type here for transliteration';
  inputContainer.appendChild(newInput);
});

Then attach the transliteration logic to the parent container using event delegation:

// Listen for input events on the parent container
inputContainer.addEventListener('input', function(e) {
  // Check if the event came from one of our transliteration inputs
  if (e.target.classList.contains('transliterate-input')) {
    // Run your transliteration logic here
    e.target.value = transliterate(e.target.value); // Replace with your actual function
  }
});

Solution 2: Attach Listeners Directly to New Inputs #

If event delegation feels overwhelming right now, you can simply attach the transliteration listener every time you create a new input. This is more straightforward for beginners.

Step-by-Step Code #

First, define a reusable transliteration handler function:

function handleTransliteration(e) {
  e.target.value = transliterate(e.target.value); // Replace with your actual function
}

Then update your input creation code to attach the listener to each new input:

const addBtn = document.getElementById('add-input');
const inputContainer = document.getElementById('input-container');

// Don't forget to attach the listener to your first existing input!
document.querySelector('.transliterate-input').addEventListener('input', handleTransliteration);

addBtn.addEventListener('click', function() {
  const newInput = document.createElement('input');
  newInput.classList.add('transliterate-input');
  newInput.placeholder = 'Type here for transliteration';
  
  // Attach the transliteration listener to the new input
  newInput.addEventListener('input', handleTransliteration);
  
  inputContainer.appendChild(newInput);
});

Quick Notes #

• Make sure your transliterate() function is accessible (either globally or within the scope of the handler functions).
• Avoid using duplicate IDs ever—they’re invalid HTML and cause bugs like this!

Either approach will get your transliteration working for all dynamically added inputs. Event delegation is better if you plan to add lots of inputs, while the direct attachment method is easier to wrap your head around as a beginner.

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