Question

我很好奇是否有一种方法可以将事件侦听器添加到动态字段中，而不是在页面加载时出现？我的问题是我正在使用动态表格，并根据选择进行更改。问题是，我需要将事件侦听器附加到表单中的特定字段，但是在页面加载时，不是所有这些表单元素都存在吗？例如，以下下拉列表将始终存在于页面上：

`var employmentStatusSelect = document.getElementById('mainForm:cont_appRequestStatus');
employmentStatusSelect.addEventListener('change',trackEmploymentStatusSelect);`

但下一个字段将显示是否从上方元素中进行了特定选择

var startCurrentJobInput = document.getElementById('mainForm:cont_appRequeststart_job');

startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);

由于在页面加载时不存在该事件，因此无法将事件侦听器附加到该事件侦听器，并且上面的代码引发错误。一旦第二个元素出现，是否可以将事件侦听器附加到第二个元素？请只使用JavaScript！ *我无法更改表单或页面，只能通过代码管理系统注入代码*

Answer 1

首先，如果您共享更多代码，则可能会获得更好的帮助。但是，我想您应该做的是运行一个函数（我现在将其称为assign()）在startCurrentJobInput有值的情况下为employmentStatusSelect赋值。

因此，我建议您像这样全局定义startCurrentJobInput变量（我想您需要全局定义它才能在其他功能中使用）：

var startCurrentJobInput;

并且不要添加事件监听器。然后，当选择employmentStatusSelect并创建新的表单元素时，运行assign func将document.getElementById('mainForm:cont_appRequeststart_job')分配给startCurrentJobInput。然后，您可以使用以下方法向其添加事件侦听器：

startCurrentJobInput.addEventListener('blur', trackStartCurrentJobInput);

Answer 2

更新更好的方法。事实证明，如果将模糊事件侦听器添加到窗体，所有输入元素也会触发该事件。 https://developer.mozilla.org/en-US/docs/Web/Events/blur

long sum = 0;
    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("hh:mm:ss");// I have also tried "HH:mm:ss" format. it gives same result
    Date date = simpleDateFormat.parse(duration);//duration is "01:00:07"
    sum= date.getTime();

var form = document.getElementById('mainForm');

form.addEventListener('blur', function( event ) {   
    if(event.target.matches('#cont_appRequeststart_job')){
      console.log('blur event triggered');
    }
}, true);

// add input
var input = document.createElement('input');
input.id = 'cont_appRequeststart_job';
form.appendChild(input)

您可以每0.5s尝试一次，直到元素存在。不推荐。

<form id="mainForm">
    
</form>

Answer 3

您可以在文档主体上附加一个事件侦听器，并检查回调中的元素类型并进行修改。

document.addEventListener('change', function(e) {
    if(e.target && e.target.id === 'mainForm:cont_appRequeststart_job') {
        //do something
    }
});

JavaScript：将事件侦听器添加到动态表单中页面加载时不存在特定表单元素的地方？

3 个答案: