Question

我有一个javascript代码，它动态添加一个元素和事件处理程序。
当添加元素时，这个事件处理程序被调用（并消失）。
当我看到动态添加的元素时通过检查员（看看事件处理程序是否成功添加）我无法找到onchnage="texttol(eletext)"函数添加它。

eletext  = document.createElement("input");
eletext.type="text";
eletext.placeholder = "Type Here";
eletext.onchange=texttol(eletext);
event.target.appendChild(eletext);

Answer 1

一旦元素实际在DOM中，就添加事件处理。

＆＃13;

var eletext = document.createElement("input");
eletext.type = "text";
eletext.placeholder = "Type Here";
eletext.id = "eletext";
document.body.appendChild(eletext);

eletext.addEventListener('change', function(e) {
  texttol(eletext.value);
}, false);

function texttol(str) {
  alert('texttol function passes: ' + str);
}

＆＃13;

Answer 2

使用此行，您将调用方法texttol并将其返回的任何内容附加到事件处理程序。

eletext.onchange=texttol(eletext);

您需要使用闭包

eletext.onchange = function() { texttol(eletext) };

甚至更好，使用addEventListener

Answer 3

我有相同的问题，但是提到的解决方案不起作用。事件处理程序函数theme_onChange在添加每个元素时执行。

我有一个Bootstrap dropdwn菜单（#themeDropdownMenu），并希望通过遍历“主题”对象属性来用按钮元素动态填充它。

function setThemes () {
	var lstThemes = document.querySelector('#themeDropdownMenu');
	var newItem;
	
	for ( x in Themes ) {
		newItem = document.createElement('button');
		newItem.innerHTML = x;
		newItem.classList.add('dropdown-item');
		newItem.type='button';
		lstThemes.appendChild(newItem);
		newItem.addEventListener('click', theme_onChange(newItem) );
	}
}

function theme_onChange (item) {
	/* console.log("Theme: " + item.innerHTML); */
	console.log (item);
}

结果：控制台会记录每个添加的按钮元素。

附加事件处理程序以动态添加元素

3 个答案: