gpt4 book ai didi

javascript - 在 JavaScript 中使用 EventListener 动态创建元素

转载 作者:太空狗 更新时间:2023-10-29 15:11:23 43 4
gpt4 key购买 nike

嗨,我被这个问题困扰了。

我需要创建一个带有动态 Onclicklisteners 的表。所以我更喜欢这种方式。

function create_weekmenu(json)
{
var column_list=json.week_list;
var menu_table=document.getElementById("weekmenu");
var row=document.createElement('tr');
for(var i=0;i<column_list.length;i++)
{
var cell=document.createElement('th');
var span_ele=document.createElement('span');
if(span_ele.addEventListener)
{
span_ele.addEventListener('click', toggletable(column_list[i]),true);
}
else if(span_ele.attachEvent)
{ // IE < 9 :(
span_ele.attachEvent('onclick', toggletable(column_list[i]));
}
span_ele.appendChild(document.createTextNode(column_list[i]))
cell.appendChild(span_ele);
row.appendChild(cell);
}
menu_table.appendChild(row);
}

我得到的结果元素结构是

<table id="weekmenu">
<tr>
<th>
<span>week_one</span>
</th>
<th>
<span>week_two</span>
</th>
</tr>
</table>

但是我需要这样的元素结构,

    <table id="weekmenu">
<tr>
<th>
<span onclick="toggle(week_one)'>week_one</span>
</th>
<th>
<span onclick="toggle(week_two)'>week_two</span>
</th>
</tr>
</table>

进一步注意:我可以看到在创建元素时触发了 onclick 监听器。但它不会与元素永久绑定(bind)。

解决方案是什么。

.innerHTMLdocument.write() 相比,我更喜欢使用appendChild() 构建DOM 结构。

最佳答案

问题是您在附加时调用了 toggleTable 函数。这就是它在您创建元素时被触发的原因。

span_ele.addEventListener('click', toggletable(column_list[i]),true);

为了避免它应该是:

span_ele.addEventListener('click', toggletable, true);

但很明显,这并没有传递到要切换的列中,所以它并不理想。

我会使用类似的东西:

function create_weekmenu(json)
{
var column_list=json.week_list;
var menu_table=document.getElementById("weekmenu");
var row=document.createElement('tr');
for(var i=0;i<column_list.length;i++)
{
var cell=document.createElement('th');
var span_ele=document.createElement('span');
if(span_ele.addEventListener)
{
span_ele.addEventListener('click', function(col) {
return function() {
toggletable(col);
}
}(column_list[i]),true);
}
else if(span_ele.attachEvent)
{ // IE < 9 :(
span_ele.attachEvent('onclick', function(col) {
return function() {
toggletable(col);
}
}(column_list[i]));
}
span_ele.appendChild(document.createTextNode(column_list[i]))
cell.appendChild(span_ele);
row.appendChild(cell);
}
menu_table.appendChild(row);
}

您需要确保将函数附加到事件处理程序,而不是函数的结果。

关于javascript - 在 JavaScript 中使用 EventListener 动态创建元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21073425/

43 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com