[英]Unable to click button in dynamically created table cell
I am creating a table dynamically in which there are buttons at the end of each row. 我正在动态创建一个表,其中每行末尾都有按钮。
The problem is, I can't make the hover effect work. 问题是,我无法使悬停效果起作用。 If I set the eventlistener on the button as well, only the eventlistener set on the div shoots.
如果我也将按钮设置为eventlistener,则只有div上设置的eventlistener才会拍摄。 Of course, if I set the eventlistener only on the button, nothing happens.
当然,如果仅在按钮上设置事件监听器,则什么也不会发生。
else if (j == 5) {
//if it's the 5th column in the table, create a button in each row.
td.className = 'editrow';
var edit_btn = document.createElement('button');
edit_btn.innerText = "Edit";
edit_btn.className = 'edit_word';
td.appendChild(edit_btn);
td.addEventListener("click", function() {
//This shoots: when I click on the table cell (so on the button or outside it)
//I cannot set edit_btn.addEventListener, it doesn't do anything
console.log("clicked");
});
}
I believe the button is covered (or behind) the td and that is why the hover doesn't work. 我相信按钮盖在td上(或后面),这就是悬停不起作用的原因。
This image may help it imagine. 此图像可以帮助您进行想象。 The yellow background color is a hover effect shot on hovering above the td (let it be the td or the button inside it).
黄色背景颜色是将鼠标悬停在td上方(使其成为td或其中的按钮)时拍摄的悬停效果。 The design of the button never changes and I double checked it should be and yes, css is correct.
按钮的设计从未改变,我再次检查了它应该是的,是的,css是正确的。
you may try the following script in head section of page : 您可以在页面的开头部分尝试以下脚本:
<script>
document.addEventListener('click',function(e){
if(e.target && e.target.className== 'edit_word'){
console.log("clicked")
}
});
</script>
and remove the td.addEventListener method from your code 并从代码中删除td.addEventListener方法
or using jQuery 或使用jQuery
<script>
$(function(){
$(document).on('click','.edit_word',function(){
console.log("clicked");
});
});
</script>```
The code you posted works fine. 您发布的代码可以正常工作。 Perhaps there's something else amiss, like CSS pointer-event overrides or HTML structure problems.
也许还有其他问题,例如CSS指针事件覆盖或HTML结构问题。 What happens if you right-click the button and choose "Inspect Element", which element does it highlight?
如果右键单击按钮并选择“检查元素”,会突出显示哪个元素会发生什么?
https://jsfiddle.net/amsv/tk3jbcms/ https://jsfiddle.net/amsv/tk3jbcms/
<table>
<tbody>
<tr>
<td id="td"></td>
<td id="result"></td>
</tr>
</tbody>
</table>
var td = document.getElementById("td");
var clicked = 0;
td.className = 'editrow';
var edit_btn = document.createElement('button');
edit_btn.innerText = "Edit";
edit_btn.className = 'edit_word';
td.appendChild(edit_btn);
edit_btn.addEventListener("click", function() {
// Logging number of times clicked..
var result = document.getElementById("result");
result.innerHTML = "Clicked: " + clicked++ + " times."
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.