Firefox问题 - 动态创建的select元素在表中不起作用

Browser - Firefox 51.0.1 (64-bit) OS - Ubuntu 14.04

浏览器 - Firefox 51.0.1(64位)操作系统 - Ubuntu 14.04

First I Created a table dynamically, The table has two columns which are editable. using an onclick event I created input/select elements dynamically by which the values were edited and saved.

首先我动态创建一个表,该表有两列可编辑。使用onclick事件我动态创建输入/选择元素,通过它们编辑和保存值。

One of the columns required a select input tag. using an onclick event on the table cell was able to add the element to the same.

其中一列需要选择输入标记。在表格单元格上使用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;
    }
}

This newly created element works perfectly fine with chrome 56.0.2924.76 (64-bit).

这个新创建的元素与chrome 56.0.2924.76(64位)完美配合。

The newly created element is unclickable(options don't show up) in Firefox. It does not trigger the events associated with the element.

Firefox中新创建的元素不可点击(选项不显示)。它不会触发与元素关联的事件。

Is there a workaround/fix for this issue. Or am I doing something wrong that is causing this problem.

是否有解决此问题的解决方法/修复程序。或者我做错了导致这个问题。

1 个解决方案

#1

The problem appears to be the contenteditable="true" on the td tag. Removing it fixes the problem.

问题似乎是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>