파이어 폭스 문제 - 동적으로 생성을 선택 요소는 내부 테이블을

Question

브라우저를 작동하지 - 파이어 폭스 51.0.1 (64 비트) OS - 우분투 14.04

먼저 내가 동적으로 테이블을 작성, 표를 편집 할 수 있습니다 두 개의 열이 있습니다. onclick 이벤트를 사용하여 입력/선택 요소를 동적으로 생성하여 값을 편집하고 저장했습니다.

하나의 열에는 select 입력 태그가 필요합니다. 테이블 셀에서 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에서 unclickable (옵션이 표시되지 않음)입니다. 요소와 연관된 이벤트를 트리거하지 않습니다.

이 문제에 대한 대안이나 해결책이 있습니까? 아니면 내가이 문제를 일으키는 뭔가 잘못하고 있습니다.

Answer 1

은 td 태그에 문제가있는 것 같습니다. 제거하면 문제가 해결됩니다.

"작동하지 않는"무엇

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>