Firefox 问题 - 动态创建的选择元素在表格中不起作用
Posted
技术标签:
【中文标题】Firefox 问题 - 动态创建的选择元素在表格中不起作用【英文标题】:Firefox Issue - dynamically created select element not working inside table 【发布时间】:2017-08-06 17:36:37 【问题描述】:浏览器 - Firefox 51.0.1(64 位) 操作系统 - Ubuntu 14.04
首先我动态创建了一个表,该表有两列可编辑。我使用 onclick 事件动态创建了输入/选择元素,通过这些元素编辑和保存了值。
其中一列需要选择输入标记。在表格单元格上使用 onclick 事件能够将元素添加到相同的单元格中。
function i_edit_avail(no, event)
event.stopPropagation();
var table = document.getElementById('plot-binfo');
var oCells = table.rows.item(no).cells;
var val = oCells.item(6).innerhtml;
var el = '<div style="position:relative"><select id="select-'+ no +'" onclick="prevent_bubble('+ no +', value, event)" onchange="i_select_avail('+ no +', value, event)">'+
'<option value="Available" label="Available">Available</option>' +
'<option value="Sold" label="Sold">Sold</option>'+
'<option value="Unavailable" label="Unavailable">Unavailable</option>' +
'<option value="Booked" label="Booked">Booked</option>'+
'</select></div>';
if(document.getElementById("select-"+no))
console.log("can't add element");
else
oCells.item(6).innerHTML = el;
这个新创建的元素与 chrome 56.0.2924.76(64 位)完美配合。
新创建的元素在 Firefox 中不可点击(选项不显示)。它不会触发与元素关联的事件。
是否有针对此问题的解决方法/修复程序。还是我做错了什么导致了这个问题。
【问题讨论】:
“不工作”是什么意思?另外,你能创建一个代码sn-p给我们看吗? jsfiddle.net/puyko02a/1 【参考方案1】:问题似乎是td
标记上的contenteditable="true"
。删除它可以解决问题。
function edit_val(v)
var table = document.getElementById('table-1');
var oCells = table.rows.item(v).cells;
var val = oCells.item(0).innerHTML;
var el = '<select id="select-' + v + '" onclick="prevent_bubble(' + v + ', value, event)" onchange="i_select_avail(' + v + ', value, event)">' +
'<option value="Available" label="Available">Available</option>' +
'<option value="Sold" label="Sold">Sold</option>' +
'<option value="Unavailable" label="Unavailable">Unavailable</option>' +
'<option value="Booked" label="Booked">Booked</option>' +
'</select>';
if (document.getElementById("select-" + v))
console.log("can't add element");
else
oCells.item(0).innerHTML = el;
function prevent_bubble(x, y, event)
event.stopPropagation();
document.getElementById("div2").innerHTML = y;
function i_select_avail(a, b, event)
event.stopPropagation();
document.getElementById("div1").innerHTML = b;
table
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
td,
th
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
tr:nth-child(even)
background-color: #dddddd;
<div id="div1"></div>
<div id="div2"></div>
<table id="table-1">
<tr>
<th>Availability</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr id="1">
<td onclick="edit_val(1)">Available</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
【讨论】:
以上是关于Firefox 问题 - 动态创建的选择元素在表格中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
firefox - 无法接收动态 javascript 的事件