仅在创建第一个Javascript函数中创建的表单后调用第二个Javascript函数

Question

我正在尝试使用动态表单创建应用程序。我想为这些表单进行屏幕计算，但我很挣扎。我可以让JS在静态网页中工作，现在我试图让这个逻辑适用于动态页面。

我相信我所追求的是屏幕上的计算JS函数只有在窗体创建后才能调用。然而，我可能只是不明白的HTML/JS的基础 - 我会让你决定...

原始页面，当下拉改变“表格”创建（基本上 - 下拉变化，加载使page2.php到的div“ForecastForm”，然后使用输入框&的div page2.php中，所述第二功能JS的目的是提供在屏幕上的计算）：

<div>Top</div> 
<br></br> 
<script> 
function GetForm(str) { 
if (str == "") { 
    document.getElementById("ForecastForm").innerHTML = ""; 
    return; 
} else { 
    if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.getElementById("ForecastForm").innerHTML = this.responseText; 
     } 
    }; 
    xmlhttp.open("GET","Page2.php?text="+str,true); 
    xmlhttp.send(); 
} 
} 
</script> 

<select id="SiteDD" onchange="GetForm(this.value)"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 
<div id="ForecastForm"><b></b></div> 

<script type="text/javascript"> 
for(var x=1; x<3; x++){ 

let num = "num"+x; 
let input = "input"+x; 
let total = "total"+x; 
let element = "element"+x; 
let inputelement = "inputelement"+x; 
let thesum = "thesum"+x; 

element = document.getElementById(num), 
inputelement = document.getElementById(input), 
thesum = document.getElementById(total); 
document.getElementById(input).onchange = function() { 
thesum.innerHTML = parseInt(element.innerHTML) + parseInt(inputelement.value); 
}; 
}; 
</script> 

<br></br> 

<div>Bottom</div> 

和“表格”那得到加载：

<div id="num1">11</div> 

<input type=number value=2 id="input1"> 

<div id="total1">0</div> 

<br> 
<br> 

<div id="num2">11</div> 

<input type=number value=2 id="input2"> 

<div id="total2">0</div> 

任何帮助或建议将大大a ppreciated。谢谢。

Answer 1

您试图加载动态内容之前绑定的事件处理程序，所以没有num1，num2，也不num3元素将您for循环的执行（同样的情况在其他元素）中被发现。

相反，使用事件代表团的原则：change事件会冒泡，所以虽然触发input元素还没有出现，你已经可以收听文档上的change事件。当以后input被添加到文档中，并生成change事件时，事件处理程序将捕获该事件，因为它会使DOM层次结构起泡。

而不是你for循环，你可以沿着这些线路使用代码：

function calculate() { 
    document.getElementById('total' + SiteDD.value).textContent = 
     +document.getElementById('num' + SiteDD.value).textContent + 
     +document.getElementById('input' + SiteDD.value).value; 
} 

document.onchange = function(e) { 
    // Check if this event was triggered from the input element we want to 
    // listen to. If so, call the calculate function: 
    if (e.target.id === 'input' + SiteDD.value) calculate(); 
}; 

你也可以尽快致电计算功能动态内容已被注射：

xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      ForecastForm.innerHTML = this.responseText; 
      calculate(); // <--- 
     } 
    };