javascript - 是否可以从代码的 otger 部分访问 innerHTML 'id'？

Question

我有以下代码，根据事件，我添加了一些 html 代码。我想在其他事件（或仅从代码的其他部分）中引用这个动态注入的 html 中的“id”：

<div id="choice"></div>

var decisionList = document.getElementById("decisionList");

decisionList.addEventListener("change", function () {

var finalChoice = document.getElementById("choice");
finalChoice.innerHTML='<input id="finalDate" type="date">'  
         
 }

和其他从 innerHTML 引用“id”的事件：

var payment = document.getElementById("finalDate");

payment.addEventListener("change", function () {

var textDate = payment.textContent; 
alert(textDate);

})

以上不起作用。有没有可能？

标签： javascript

Answer 1

这是可能的，但要让付款变得懒惰。这意味着，与其立即（在您的其他代码中）设置第二个更改侦听器，不如让其他代码成为一个函数。然后在您创建额外 div 或输入或其他内容的第一个触发器中，调用该设置函数。

decisionList.addEventListener("change", function () {
  const finalChoice = document.getElementById("choice");
  finalChoice.innerHTML='<input id="finalDate" type="date">'  
  createFinalDateListener();
}

function createFinalDateListener() {
  const payment = document.getElementById("finalDate"); 
  payment.addEventListener("change", function () {
    const textDate = payment.textContent; 
    alert(textDate);
  });
}

---

这是一个类似的例子。我没有立即输入。或听者。而且我只在创建输入后创建一个侦听器。

// Here's the main trigger
function addExtraElements() {
  // let's create a datepicker dynamically.
  document.querySelector('#placeholder').innerHTML = '<input type="date" placeholder="pick date">';
  listenDateChanges();
  // TODO: don't forget to add cleanup code! Each time you fill that innerHTML, the old listener will remain
}

// Here's your datepicker listener
function listenDateChanges() {
  const datePickerEl = document.querySelector('input[type="date"]');
  if (!datePickerEl) {
    console.log('no picker');
    return;
  }
  datePickerEl.addEventListener('change', () => alert(datePickerEl.value));
}

<div id="placeholder">
  Placeholder
</div>
<button onclick="addExtraElements()">Add extra elements</button>