javascript单击事件问题
[英]Issue with javascript click event
问题描述
我正在使用javascript创建日历应用程序。 日历视图是使用javascript（dom元素）显示的，为此我创建了一个通用方法，并调用了该方法来显示更新的日历视图。 单击特定日期时，我需要更新日历的显示，但是当触发更新事件时，日历仅更新一次。 我创建了一个类似的演示，并在下面提供了相同的演示。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
this.show();
for (let i = 0; i < 10; i++) {
$('#li-' + i).click(() => {
alert(i);
this.show();
});
}
});
function show() {
let elem = document.getElementById('body');
elem.innerHTML = "";
let ul = document.createElement('ul');
for (let i = 0; i < 10; i++) {
let li = document.createElement('li');
let text = document.createTextNode(i);
li.appendChild(text);
li.setAttribute('id', 'li-' + i);
li.style.cursor = 'pointer';
ul.appendChild(li);
elem.appendChild(ul);
}
}
</script>
</head>
<body>
<div id="body"></div>
</body>
</html>
在此示例中，当我单击“ li”元素时，将触发单击事件，并显示警报框。 同样，调用“ show（）”方法来更新视图。 但是，单击另一个“ li”元素时，不会触发该事件。
2 个解决方案
解决方案1
3 已采纳 2019-06-18 11:54:11
旁注：我一定会重构您的代码。
问题是： this.show()实际上是重绘 id为body的整个div。
重新绘制元素（并删除以前的现有元素）会取消注册不会自动注册的click事件。 在当前情况下，您在渲染事件之后立即注册一次事件，但是在再次渲染div之后不再注册它们。
解决方案是通过在show函数内部移动for来再次注册事件。
$(document).ready(() => { this.show(); }); function show() { let elem = document.getElementById('body'); elem.innerHTML = ""; let ul = document.createElement('ul'); for (let i = 0; i < 10; i++) { let li = document.createElement('li'); let text = document.createTextNode(i); li.appendChild(text); li.setAttribute('id', 'li-' + i); li.style.cursor = 'pointer'; ul.appendChild(li); elem.appendChild(ul); } for (let i = 0; i < 10; i++) { $('#li-' + i).click(() => { alert(i); this.show(); }); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="body"> </div>
解决方案2
1 2019-06-18 11:57:09
当您单击任何元素时，您将再次调用show（），以便再次创建DOM并取消绑定，以便您可以绑定到文档，即如果创建了新DOM则它将自动被绑定
$(document).on("click", 'body #li-' + i, function(event){
alert(i);
this.show();
}.bind(this));
JavaScript点击事件问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.